Lo strano caso del dottor JPEG e del signor PNG


Ultimamente mi è capitato di approfondire i due diffusi formati grafici che si usano praticamente dappertutto e, soprattutto, sul web. Embè, direte voi, cosa c’è da approfondire? Qualcosa, almeno per me, c’è stato…

Dottor JPEG

Innanzi tutto JPEG è un acronimo che sta per Joint Photographic Expert Group, il comitato tecnico ISO che ha introdotto l’omonimo standard di compressione delle immagini digitali. Si tratta di uno standard che prevede la compressione con perdita di qualità (lossy), per cui la riduzione del peso dell’immagine è ottenuta sostanzialmente grazie alla possibiltà di “buttar via” alcuni particolari dell’immagine di partenza. La scelta dei particolari di cui si può fare a meno è fatta dall’algoritmo di compressione, in base a vari parametri, tra cui la qualità desiderata è senz’altro il più influente (alta qualità corrisponde a bassa compressione, e viceversa). Il fatto di essere lossy rende il formato JPEG inadatto a salvare le fasi intermedie delle elaborazioni grafiche: ogni volta che si salva vengono persi ulteriori particolari con una continua degradazione dell’immagine. Quindi la strategia corretta che ogni “fotoritoccatore” deve adottare è questa: fare i salvataggi intermedi in formati senza perdita di qualità (ad esempio in PNG, l’altro formato di cui si parla in questo post, oppure nel formato nativo del programma che si sta utilizzando) ed usare il JPEG solo per esportare il risultato finale dell’elaborazione.

Qualcosa sulla codifica dei colori

Una cosa di cui non ero a conoscenza è che la codifica dei colori nei file JPEG è la YCbCr, che è la stessa codifica della televisione del salotto. In sostanza (mi scusino i puristi…) l’informazione sul colore viene codificata in tre canali: Y (luminanza) è una versione in bianco e nero (o, meglio, in toni di grigio) dell’immagine, mentre i canali Cb e Cr (crominanza) registrano la deviazione dal bianco verso, rispettivamente, blu e rosso. Questa codifica a colori naque come evoluzione della precedente codifica utilizzata nelle trasmissioni televisive in bianco e nero, in cui l’unico canale presente era la luminanza Y. Così i vecchi apparecchi TV in bianco e nero poterono continuare a funzionare anche con le nuove trasmissioni a colori (utilizzando solo il canale Y ed ignorando gli altri due), mentre le nuove TV a colori tinteggiavano allegramente l’immagine utilizzando l’informazione extra dei canali Cb e Cr.

I monitor per computer (VGA e successivi), invece, codificano il colore in maniera più ricca, con un metodo che si chiama RGB: si parte da una tela priva di colori (lo schermo nero) e si aggiungono – sintesi additiva – componenti dei tre colori fondamentali (rosso verde blu o, in inglese, red green blue, RGB appunto) fino ad ottenere il colore desiderato. In questo caso la luminanza è data dalla somma delle tre componenti, mentre l’informazione cromatica deriva dai rapporti relativi tra i tre colori fondamentali: ad esempio, se i tre valori sono uguali tra loro si otterrà sempre una tonalità di grigio.

Ma come mai, visto che il JPEG è destinato ai computer, non si è scelta la codifica RGB? Semplice: per risparmiare spazio! L’occhio umano è più sensibile alle variazioni di luminosità che a quelle di colore, quindi una codifica in cui c’è una separazione tra luminanza e crominanza consente di adottare strategie di compressione distinte per l’una e per l’altra, andando a sacrificare quello che viene, a priori, apprezzato di meno (ossia i colori). Quindi, durante il salvataggio su file la codifica dei colori passa da RGB a YCbCr, mentre quando il file viene aperto si passa da YCbCr a RGB.

Un effetto collaterale importante della diversa codifica dei colori è che non tutti i colori RGB possono essere rappresentati in YCbCr e, quindi, non tutti i colori RGB possono essere contenuti in un file JPEG. Sì, avete capito bene: non tutti i colori RGB possono essere contenuti in un file JPEG. Per rendersene conto è sufficiente prendere un qualsiasi programma grafico capace di esportare in JPEG, creare una semplice immagine monocromatica con uno dei colori incriminati, salvare in JPEG, riaprire il file salvato e verificare che il colore salvato è diverso da quello iniziale. Ad esempio:

L’immagine a sinistra ha il colore originale, RGB=(223, 17, 104), quella a destra è ciò che il JPEG riesce a salvare, ossia RGB=(224, 17, 105). Sembrano uguali, vero? Ve l’ho detto che l’occhio umano è poco sensibile alle variazioni di colore!

Questo piccolo problema dovrebbe indurvi ad abbandonare il JPEG? No: a parte che un grafico può sempre decidere di limitarsi ed usare sempre e solo colori “JPEG compliant”, ma, comunque, ci sono delle cose per cui il JPEG è insuperabile, come la compressione delle immagini fotografiche.

Sappiate che

Il JPEG va usato per

  • esportare l’elaborazione finale di immagini fotografiche: è esattamente l’applicazione per la quale JPEG è stato concepito;
  • esportare immagini laddove la fedeltà cromatica non è importante;
  • esportare immagini a basso contrasto.

Ma statene alla larga se

  • la fedeltà cromatica è importante;
  • l’immagine è molto contrastata: l’algoritmo di compressione JPEG introduce artefatti evidenti nelle zone a forte contrasto (ad esempio, non usare mai il JPEG per salvare una pagina di testo in bianco e nero da destinare ad un OCR!);
  • dovete salvare risultati intermedi di una elaborazione grafica (compressione lossy: ricordate?).

Mister PNG

PNG (Portable Network Graphics) può essere considerato come il formato complementare a JPEG. Storicamente nasce come sostituto evoluto e, soprattutto, libero da brevetti del formato GIF. Come il GIF è un formato lossless (senza perdità di qualità), quindi utilizzabile per salvare gli stadi  intermedi delle elaborazioni grafiche, ma lo supera in diversi punti:

  • GIF è limitato a non più di 256 colori per immagine. PNG no;
  • GIF ha un modello di trasparenza on/off. PNG permette trasparenze sfumate;
  • GIF usa un algoritmo di compressione anzianotto e gravato da brevetto (LZW). PNG usa un algoritmo più recente, più efficiente e libero (DEFLATE).

L’unica cosa che GIF ha in più rispetto a PNG è la possibilità di salvare più immagini come piccole animazioni (GIF animate).

La codifica dei colori del formato PNG è RGB, la stessa del monitor per computer, quindi non soffre dei problemi di fedeltà cromatica a video di cui soffre il JPEG. Inoltre, essendo senza perdita di qualità, non soffre neanche delle aberrazioni sui forti contrasti.

Qualcosa sulla resa a video

Uhm, quanto luccicare… ma è tutto oro? Quasi: The Sad Story of PNG Gamma “Correction”. In soldoni la faccenda è questa: in un file PNG si possono salvare delle informazioni avanzate riguardo la resa cromatica del monitor su cui l’immagine è stata creata/elaborata/finalizzata. Queste informazioni sono il fattore gamma, il profilo ICC ed altre. I programmi di visualizzazione (browser web, visualizzatori, editor grafici etc.), conoscendo anche le caratteristiche cromatiche del monitor corrente, sono così in grado di riprodurre i colori dell’immagine PNG in modo fedele a come erano stati concepiti in partenza. Bene, direte voi. Il problema è che la totalità dei browser web applica (giustamente) la gamma correction alle immagini PNG che ne sono fornite, ma non ai colori che sono dati per via programmatica come, ad esempio, il colore di sfondo in un foglio di stile CSS. Quindi un’immagine PNG che, nell’intenzione dello sviluppatore della pagina web, dovrebbe essere un tutt’uno con lo sfondo circostante, può risultare di colore differente se visualizzata su un altro computer. Questo problema si verifica ogni volta che il computer dello sviluppatore e quello dell'”utilizzatore finale” hanno impostato valori di gamma correction diversi. Se ci si limita ai default, il caso più frequente è quando uno dei due lavora su Mac e l’altro su PC, o viceversa. C’è un modo per ovviare al problema? Fortunatamente sì! Se l’immagine PNG è priva di informazioni di taratura cromatica, i browser non fanno altro che sparare i colori a video così come sono dentro all’immagine, come già fanno con i colori di sfondo CSS: in questo modo si perde la fedeltà rispetto al colore originale, ma almeno c’è coerenza all’interno della pagina.

Un modo per eliminare queste informazioni cromatiche avanzate dai file PNG è usare il programma pngcrush da linea di comando:

$ pngcrush -rem gAMA -rem cHRM -rem iCCP -rem sRGB infile.png outfile.png

Non conosco altri metodi per farlo: io uso GIMP, che è in grado di salvare senza fattore gamma ma non senza chunk sRGB, e questo è già sufficiente a far scattare il meccanismo perverso.

Ricapitolando

Usate PNG quando

  • la fedeltà cromatica è importante;
  • l’immagine è molto contrastata;
  • si deve salvare il risultato intermedio di una elaborazione grafica;
  • l’immagine ha origine artificiale, ossia non è una fotografia.

Invece, non usate PNG se

  • si tratta di una fotografia e la dimensione deve essere la più piccola possibile;
  • occorre una piccola animazione (in questo caso la scelta ricade ancora su GIF).

Nota finale

Tutte le considerazioni fatte in questo articolo hanno senso quando il media di visualizzazione è lo schermo di un computer, quindi per la realizzazione di pagine web o cose del genere. Se la destinazione finale è la stampa, si sta parlando proprio di un altro sport.

Advertisements

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...