Senza perdita o con perdita: come funziona la compressione

Un bed and breakfast a Bosco Gurin rinnova il suo sito web. La titolare ha belle foto: le camere, la colazione, le montagne sopra il villaggio nella luce della sera. Ogni foto pesa circa otto megabyte. Il nuovo sito si carica sul telefono con una lentezza esasperante, e il logo, che ha salvato come JPG, ha improvvisamente contorni sfocati e macchiati.

Entrambe le cose dipendono dalla compressione, ed entrambe si risolvono quando si sa che cosa succede davvero quando si comprime un’immagine.

Due modi per rendere più piccola un’immagine

I formati d’immagine risparmiano spazio in due modi fondamentalmente diversi:

• Senza perdita. L’immagine è salvata in modo che ogni pixel possa essere ripristinato esattamente. Si risparmia spazio descrivendo abilmente le ripetizioni — una superficie di un solo colore richiede meno informazioni di una movimentata.
• Con perdita. Il formato scarta informazioni di cui l’occhio sente poco la mancanza. L’immagine sembra quasi uguale, ma non è più identica all’originale — e spesso è molto più leggera.

MDN, la documentazione per sviluppatori di Mozilla, classifica così i formati più comuni:

Formato	Compressione	Per che cosa lo descrive MDN
JPEG	con perdita	Foto e immagini con sfumature di colore morbide
PNG	senza perdita	Riproduzione esatta e trasparenza
GIF	senza perdita, al massimo 256 colori	Immagini semplici e animazioni
WebP	con o senza perdita	Immagini e animazioni, più leggere che in PNG o JPEG
AVIF	con o senza perdita	Immagini e animazioni con compressione elevata

Come JPEG risparmia spazio

JPEG è normato come raccomandazione T.81 dell’UIT ed è il formato diffuso per le foto. Secondo MDN, la sua compressione con perdita si basa sulla trasformata discreta del coseno. In parole semplici: l’immagine viene suddivisa in piccoli blocchi, e in ogni blocco i dettagli fini che l’occhio percepisce appena vengono descritti in modo più grossolano o tralasciati.

Quanto viene tralasciato lo determina il livello di qualità scelto al salvataggio. Non esiste un unico numero giusto; web.dev, un sito informativo di Google dedicato allo sviluppo web, raccomanda di provare più livelli di qualità e di cercare il miglior compromesso tra qualità e dimensione del file.

Perché testo e contorni ne soffrono

Il logo con i contorni macchiati ha una ragione semplice. I procedimenti con perdita sono pensati per passaggi morbidi, come quelli presenti nelle foto. Sui contorni netti — lettere, linee, loghi — le perdite si notano. MDN lo descrive così: in screenshot, diagrammi, loghi e disegni al tratto, sfocature e aloni colorati attorno al testo e ai contorni netti sono ben visibili; per immagini di questo tipo MDN raccomanda una codifica senza perdita.

A ciò si aggiunge la trasparenza: JPEG non ha un canale alfa. Un logo che deve stagliarsi liberamente su uno sfondo colorato ha bisogno di un formato con trasparenza, come PNG, WebP o AVIF — oppure, per loghi e icone che devono restare nitidi a qualsiasi dimensione, di una grafica vettoriale in formato SVG.

WebP e AVIF

I formati più recenti sanno fare entrambe le cose: con e senza perdita. MDN fornisce cifre per il confronto: le immagini WebP con perdita sono in media dal 25 al 35 per cento più leggere delle immagini JPEG di qualità simile, e le immagini WebP senza perdita sono tipicamente del 26 per cento più leggere delle stesse immagini in formato PNG. Secondo MDN, le immagini AVIF con perdita sono circa del 50 per cento più leggere delle immagini JPEG di qualità simile.

Per le immagini raster sul web, MDN raccomanda quindi in primo luogo WebP o AVIF, con PNG o JPEG come soluzione di ripiego per i browser che non supportano questi formati. Per l’invio via e-mail o per i programmi che non conoscono WebP e AVIF, JPEG resta spesso la scelta più sicura.

Conta più la dimensione che il livello

Gli otto megabyte delle foto dipendono meno da una cattiva compressione che dalla loro dimensione: un telefono attuale scatta immagini larghe diverse migliaia di pixel. Sul sito web compaiono forse con una larghezza di 1200 pixel.

Il calcolo alla base è quadratico. web.dev osserva che uno schermo con densità di pixel doppia non ha bisogno del doppio, ma del quadruplo dei pixel — il doppio in larghezza e il doppio in altezza. Al contrario: un’immagine ridotta a metà della larghezza ha soltanto un quarto dei pixel. Ridurre l’immagine alla dimensione effettivamente necessaria fa quindi spesso risparmiare più di qualsiasi livello di qualità.

Colori e profondità di bit

I formati si distinguono anche per la finezza con cui graduano i colori. Secondo MDN, JPEG memorizza 8 bit per componente di colore, mentre PNG può memorizzarne anche 16 per componente. Per un sito web ciò è raramente decisivo. Per immagini che devono ancora essere ritoccate a fondo o stampate in alta qualità, la gradazione più fine può contare — un motivo in più per conservare l’originale in un formato senza perdita o nel formato della fotocamera.

Verificare a occhio

Il modo più affidabile per capire se un livello di qualità basta è guardare il risultato alle dimensioni originali. Due punti rivelano per primi le perdite: i contorni molto contrastati, come il telaio di una finestra davanti a un cielo chiaro, e le ampie sfumature morbide come un cielo serale, in cui con una compressione troppo forte diventano visibili dei gradini. Se entrambi appaiono bene, il livello in genere è sufficiente.

Conservare l’originale

La compressione con perdita ha una proprietà che conviene conoscere: ciò che è stato scartato non ritorna. Ogni nuovo salvataggio in JPEG è una nuova compressione con perdita, a partire da un’immagine che ha già perso informazioni. Chi ritocca un’immagine più volte e la salva ogni volta in JPEG vede le perdite aumentare.

Ne deriva un modo di lavorare semplice: conservare l’originale invariato e produrre ogni versione ridotta o compressa a partire dall’originale, non dall’ultima versione.

Che cos’altro contiene il file

Non ogni byte di un file d’immagine è immagine. Le foto scattate con telefoni e fotocamere contengono spesso metadati: data dello scatto, modello della fotocamera, talvolta il luogo esatto. Per il sito del bed and breakfast queste indicazioni sono superflue — e il luogo di scatto di una foto fatta nell’abitazione privata della titolare non ha comunque posto in rete. Si possono rimuovere contestualmente alla compressione.

Le foto dell’iPhone

Chi fotografa con un iPhone ha spesso gli originali in formato HEIC. Alcuni programmi per siti web si aspettano però JPG, PNG o WebP. Che cosa considerare nella conversione lo descrive l’articolo Convertire HEIC in JPG.

Per il bed and breakfast di Bosco Gurin

La titolare passa in rassegna le immagini una volta: le foto vengono ridotte alla larghezza con cui compaiono sul sito, raddoppiata per gli schermi ad alta densità di pixel, e salvate in WebP con un livello di qualità che ha provato su tre esempi. Il logo lo riceve dalla sua grafica in formato SVG. Gli originali restano in una cartella a parte, e i metadati vengono rimossi.

Gli strumenti immagini che stiamo sviluppando comprimeranno e ridimensioneranno le immagini e le convertiranno tra JPG, PNG, WebP e HEIC — elaborate in Svizzera, in memoria, senza che alcuna immagine resti salvata, e in modalità riservata interamente sul Suo dispositivo.