◩ Grafica e immagini

Dentro il formato PNG: chunk, filtri, DEFLATE e trasparenza

Come è fatto un file PNG: firma, chunk, tipi di colore, filtri di riga, compressione DEFLATE, interlacciamento e i metodi per ottenere file più leggeri.

Il PNG (Portable Network Graphics) è il formato senza perdita di riferimento per grafica, screenshot e immagini con trasparenza. È anche un formato molto ben documentato e progettato con cura: guardarne la struttura interna spiega perché alcuni PNG pesano dieci volte più di altri con lo stesso aspetto, e cosa si può fare per alleggerirli senza toccare un pixel.

La firma e i chunk

Ogni file PNG inizia con una firma fissa di 8 byte. Oltre a identificare il formato, è stata scelta in modo da rivelare i trasferimenti corrotti: contiene, per esempio, caratteri di fine riga che verrebbero alterati da un trasferimento in modalità testo.

Dopo la firma il file è una sequenza di chunk, blocchi con una struttura sempre uguale:

lunghezza (4 byte) | tipo (4 lettere) | dati | CRC (4 byte)

Il CRC è un codice di controllo che permette di accorgersi se un chunk è danneggiato. Il nome di quattro lettere segue una convenzione: la maiuscola o minuscola della prima lettera dice se il chunk è indispensabile (critico) o accessorio, ed è così che un lettore può ignorare con sicurezza i chunk che non conosce.

I chunk principali

Chunk Contenuto
IHDR larghezza, altezza, profondità di bit, tipo di colore, interlacciamento
PLTE la palette, per le immagini indicizzate
IDAT i dati dell'immagine compressi (anche in più chunk consecutivi)
IEND marca la fine del file
tRNS trasparenza semplice per immagini a palette o colore singolo
gAMA, cHRM, sRGB, iCCP informazioni sul colore e profilo ICC
tEXt, iTXt, zTXt testi e metadati

Tipi di colore

Il PNG supporta cinque combinazioni:

  • scala di grigi, da 1 a 16 bit;
  • RGB, a 8 o 16 bit per canale;
  • indicizzato, con palette fino a 256 colori e 1, 2, 4 o 8 bit per pixel;
  • scala di grigi con alfa;
  • RGBA, colore con canale alfa completo.

Scegliere il tipo giusto è il primo passo per ridurre il peso. Un'icona con dodici colori salvata come RGBA a 8 bit usa 32 bit per pixel; la stessa icona indicizzata può usarne 4.

I filtri: preparare i dati alla compressione

Prima della compressione, ogni riga dell'immagine passa per un filtro che trasforma i valori in differenze rispetto ai pixel vicini. Il filtro si sceglie riga per riga tra cinque possibilità:

  1. None: nessuna trasformazione.
  2. Sub: differenza rispetto al pixel a sinistra.
  3. Up: differenza rispetto al pixel sopra.
  4. Average: differenza rispetto alla media tra sinistra e sopra.
  5. Paeth: differenza rispetto a una previsione che sceglie tra sinistra, sopra e diagonale quello più vicino a una stima lineare.

In una sfumatura orizzontale regolare, il filtro Sub trasforma valori crescenti in una sequenza di numeri tutti uguali, che si comprime quasi a zero. I filtri non comprimono nulla da soli: rendono i dati più prevedibili per la fase successiva.

La compressione DEFLATE

I dati filtrati vengono compressi con DEFLATE, lo stesso algoritmo usato dai file ZIP e da gzip. Combina un dizionario a finestra scorrevole (famiglia LZ77), che sostituisce ripetizioni con riferimenti all'indietro, e la codifica di Huffman. È veloce in decompressione e privo di perdita, ma ha un limite: la finestra di ricerca è relativamente piccola, quindi ripetizioni molto distanti nell'immagine non vengono sfruttate.

Interlacciamento Adam7

Un PNG può essere salvato con l'interlacciamento Adam7, che divide i pixel in sette passate: la prima contiene un pixel ogni 8 × 8, le successive riempiono progressivamente i vuoti. Durante il caricamento si vede subito un'anteprima a bassa risoluzione. Il costo è un file di solito più pesante, perché i pixel di ogni passata sono meno correlati tra loro. Oggi, per la maggior parte degli usi, conviene lasciarlo disattivato.

Come alleggerire un PNG

Nel mio lavoro seguo questo ordine, dal più sicuro al più incisivo:

  1. Rimuovere chunk superflui: testi, date, anteprime e metadati del programma che ha salvato il file. Attenzione a conservare le informazioni sul colore, se servono.
  2. Ridurre il tipo di colore: un'immagine senza trasparenza non ha bisogno del canale alfa; una grafica con pochi colori può diventare indicizzata.
  3. Ricomprimere in modo esaustivo: strumenti come oxipng o zopflipng provano molte combinazioni di filtri e parametri DEFLATE. Il risultato è identico pixel per pixel, ma spesso più leggero del 10–30%.
  4. Quantizzare (con perdita): strumenti come pngquant riducono un'immagine RGBA a una palette di 256 colori con dithering. Non è più senza perdita, ma per icone e illustrazioni il risultato è spesso indistinguibile e il peso cala drasticamente.

Quando il PNG non è la scelta giusta

  • Fotografie: il rumore e le sfumature continue si comprimono male; un JPEG o un formato moderno con perdita pesa una frazione.
  • Animazioni: esiste l'estensione APNG, ben supportata dai browser, ma per animazioni lunghe un video è molto più efficiente.
  • Grafica semplice scalabile: loghi e icone composti da forme geometriche stanno meglio in SVG.

In sintesi

  • Un PNG è una firma seguita da chunk con lunghezza, tipo, dati e CRC.
  • I tipi di colore vanno da 1 bit in scala di grigi a RGBA a 16 bit: scegliere quello minimo riduce il peso.
  • I filtri di riga trasformano i pixel in differenze prevedibili, poi DEFLATE comprime.
  • L'interlacciamento Adam7 di solito appesantisce il file.
  • Rimozione di metadati, riduzione del tipo di colore e ricompressione alleggeriscono senza perdita; la quantizzazione va oltre, con perdita.
MM
Marco Marzaduri

Marco Marzaduri si occupa di cybersecurity, informatica forense e sviluppo web. Laureato in informatica, unisce il rigore dell'analisi tecnica all'attenzione per le persone che usano la tecnologia.

Leggi anche