Preparare un'immagine per la pubblicazione

Ridimensiona alla misura con cui l'immagine verrà effettivamente mostrata, al massimo al doppio per gli schermi ad alta densità. Ritaglia nella forma che serve al layout invece di lasciare che sia il browser a schiacciarla. Comprimi finché gli artefatti non cominciano appena a comparire, poi torna indietro di una tacca. Rimuovi i metadati per ultima cosa. L'ordine conta: ogni passo dopo il primo lavora su molti meno pixel.

Prima di tutto le dimensioni

Il numero di pixel cresce con il quadrato della larghezza, quindi una differenza modesta nelle dimensioni è una differenza enorme nei dati. Un'immagine salvata a 4000 pixel di larghezza e mostrata in una colonna da 800 pixel porta con sé circa venticinque volte i dati che le servono, e nessuna impostazione di qualità recupera la situazione.

Per scegliere una larghezza obiettivo, misura la larghezza massima con cui l'immagine viene mai resa nel layout, non la larghezza massima che raggiunge lo schermo. Una scheda in una griglia a tre colonne potrebbe non superare mai i 380 pixel di larghezza. Se un solo file serve più punti, dimensionalo per il più grande.

Pixel del dispositivo, pixel CSS e il mito dei DPI

Un pixel CSS è un'unità di impaginazione, non un punto fisico. Il rapporto di pixel del dispositivo indica quanti pixel fisici lo schermo dipinge per ogni pixel CSS: 1 sui monitor più vecchi, 2 sulla maggior parte di telefoni e portatili moderni, 3 su alcuni telefoni. Una colonna da 800 pixel CSS con rapporto 2 viene dipinta con 1600 pixel del dispositivo, ed è per questo che un'immagine dimensionata sulla sua larghezza CSS appare morbida.

La regola pratica è 2x. Esporta al doppio della larghezza di visualizzazione e lascia che sia il browser a rimpicciolire. Passare a 3x costa un altro 125% di dati per una differenza che poche persone notano a una normale distanza di lettura.

I DPI e i PPI memorizzati in un file sono irrilevanti per il web. Sono un unico numero nell'intestazione che dice a che dimensione fisica il file andrebbe stampato, e i browser lo ignorano del tutto.

printed width in inches = pixel width / PPI

3000 px / 300 ppi = 10.0 in
3000 px /  72 ppi = 41.7 in    same file, same 3000 pixels

Esportare a «300 DPI» non aggiunge alcun pixel e non cambia alcun dato dell'immagine.

Che cosa fa il ricampionamento

Rimpicciolire significa che molti pixel sorgente diventano uno solo. Il dettaglio più fine della nuova griglia non può essere rappresentato, e se chi ricampiona preleva troppo pochi pixel sorgente invece di mediare su tutta l'area, quel dettaglio si ripiega come motivo spurio: diagonali seghettate e moiré sulle texture fini e ripetitive, come una camicia a righe o una tabella con bordi da un pixel. Una buona riduzione media tutti i pixel che vi contribuiscono, e di solito richiede poi un po' di nitidezza.

Ingrandire non crea dettaglio. L'interpolazione si limita a stimare i valori fra pixel che esistono già, quindi il risultato è morbido o a blocchi. Gli ingranditori basati sull'apprendimento automatico inventano invece dettaglio plausibile, che non è la stessa cosa che recuperarlo.

Proporzioni: ritagliare, incorniciare o deformare

Il ritaglio mantiene il soggetto alla sua scala corretta e scarta i bordi, ed è la scelta predefinita giusta. L'incorniciatura a bande mantiene l'intero fotogramma ma aggiunge delle bande e costringe a scegliere il colore delle bande; si guadagna il posto quando non si può tagliare nulla, come per un'opera o un diagramma. La deformazione distorce, e l'occhio se ne accorge all'istante su volti, cerchi e caratteri tipografici.

.tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;   /* crop; contain = letterbox, fill = stretch */
}

Quando un solo file compare in più formati, ragiona in termini di area sicura: la regione che sopravvive a ogni ritaglio. Un banner 16:9 taglia sopra e sotto, un riquadro 1:1 e una scheda 4:5 tagliano ai lati, quindi ciò che tutti conservano è una fascia che attraversa il centro. Tieni dentro quella fascia il soggetto e ogni testo, altrimenti un volto vicino al bordo di una foto orizzontale viene decapitato dal ritaglio quadrato.

Trovare l'impostazione di qualità

Un numero di qualità non è la percentuale di nulla, e le scale non sono confrontabili fra encoder diversi. JPEG 80, WebP 80 e AVIF 80 sono tre impostazioni senza alcun rapporto fra loro.

Il metodo è lo stesso per tutte. Esporta con qualche impostazione diversa, guarda il risultato alla dimensione con cui verrà mostrato, e controlla dove affiorano per primi gli artefatti: i gradienti morbidi come i cieli, che formano bande e chiazze; i bordi netti e il testo, che si circondano di anelli. Trova il punto in cui il danno diventa visibile, torna indietro di una tacca, fermati.

Un unico numero fisso è sbagliato per ogni immagine, perché è il contenuto a decidere quanto si può buttare via: una fotografia rumorosa e ricca di texture ha bisogno di più bit per sopravvivere, mentre un'illustrazione piatta si sfalda a un'impostazione che una foto affollata si scrolla di dosso.

Scontorni, bordi morbidi e aloni

Rimuovere lo sfondo è la scelta giusta quando l'immagine deve appoggiarsi su più di un colore di sfondo, oppure sovrapporsi ad altri elementi: foto di prodotto, loghi, una persona inserita in un layout. È sbagliata dove il confine è davvero sottile, come con i capelli, il fogliame o il vetro, perché una maschera fatta male ha un aspetto peggiore di un onesto rettangolo.

Un bordo netto è binario, ogni pixel completamente opaco o completamente trasparente, il che va bene per la grafica piatta ma produce una scalinata su qualsiasi cosa fotografica. Una maschera morbida ammette opacità frazionarie, quindi un pixel può essere per il 40% soggetto, che è l'unico modo perché i capelli abbiano un aspetto corretto.

L'alone viene dai pixel di confine. La sfocatura dell'obiettivo e l'antialiasing hanno già mescolato il colore del soggetto con il vecchio sfondo, quindi ciascuno di essi contiene:

observed = alpha * foreground + (1 - alpha) * background

La rimozione dello sfondo calcola soltanto l'alfa. Il colore rimasto in quei pixel è ancora contaminato, quindi un soggetto ritagliato da uno scatto in studio su bianco si porta dietro una frangia chiara: invisibile su una pagina bianca, evidente su una scura. Un matting fatto per bene risolve anche per il colore di primo piano, ed è esposto sotto voci come togli frangia o decontamina i colori. In mancanza di quello, stringi la maschera verso l'interno di una frazione di pixel e sfumala di nuovo.

Rotazione e metadati

Un'immagine dritta in un programma e coricata in un altro è quasi sempre una questione di orientamento EXIF. Le fotocamere memorizzano l'immagine del sensore senza ruotarla e aggiungono un tag che dice come va girata. Il software che legge il tag la mostra correttamente; quello che lo ignora, comprese molte librerie per immagini e molti generatori di miniature, mostra i pixel grezzi su un fianco.

La soluzione è imprimere la rotazione nei pixel e portare il tag a 1 oppure rimuoverlo. Ruotare a passi di 90 gradi riordina i pixel senza ricampionarli. Fai attenzione alla doppia rotazione: pixel già girati, tag ancora impostato, così ogni visualizzatore conforme li gira di nuovo.

Rimuovere i metadati è un intervento di privacy, non di pulizia. I blocchi EXIF, IPTC e XMP portano abitualmente coordinate GPS precise a pochi metri, l'ora dello scatto, marca, modello e numero di serie della fotocamera, il nome del proprietario, e a volte una miniatura incorporata che mostra ancora l'immagine prima del ritaglio. Una foto scattata in casa e pubblicata intatta pubblica anche un indirizzo di casa.

Rimuovili per ultimi, con un'eccezione: il profilo colore ICC sta accanto a quei metadati, e toglierlo da un'immagine a gamut ampio lascia dei numeri che verranno letti come sRGB, e che appariranno come colori piatti o troppo saturi. Converti prima in sRGB, poi elimina tutto il resto.