Come scegliere il formato giusto per le tue immagini

JPEG, PNG e GIF. Alcuni web designer imparano quale formato utilizzare solamente dopo un po’ di esperienza e quasi nessuno capisce come queste estensioni funzionino davvero.

In questo articolo, illustreremo brevemente gli algoritmi di compressione utilizzati da ogni formato, in modo da capire come differenti approcci siano più o meno appropriati per tipi di immagini differenti.

Iniziamo da un vecchio amico…

 

JPEG

Joint Photographic Experts Group

Con i suoi 25 anni, lo standard ISO 10918 ha decisamente superato la prova del tempo. Ma come funziona? E per quali situazioni è più indicato?

La compressione JPEG divide l’immagine in blocchi da 8×8 pixel, e in seguito compie un calcolo piuttosto complesso. Converte i pixel di questi blocchi (liste di valori RGB assegnate ad ogni punto nello spazio) in coefficienti che li descrivono come onde. In termini tecnici, l’algoritmo di compressione JPEG traduce le informazioni di un’immagine in frequenze.

Questo significa che JPEG risulta ottimale nella compressione di immagini con molte sfumature di colore. Sostanzialmente, JPEG interpreta tutte le immagini come se fossero fotografie. Al contrario, però, il formato JPEG risulta terribile per la compressione di immagini con bordi netti o con texture definite.

 

JPEG

 

Per comprimere questo tipo di immagine in modo ottimale dobbiamo utilizzare un altro tipo di algoritmo:

 

GIF

Graphic Interchange Format

Nei primi giorni del web, se un’immagine non era JPEG, era sicuramente GIF.

Il formato GIF utilizza l’algoritmo di compressione LZW, molto più semplice della mate-magia introdotta da JPEG. Essenzialmente, l’algoritmo LZW scansiona i dati relativi all’immagine e genera degli shortcode (delle abbreviazioni utilizzate per richiamare codici più complessi) per quelle parti che si ripetono; LZW accorcia le ripetizioni. Questo vuol dire che il formato GIF è adatto a comprimere immagini con grandi aree di dati identici o ripetuti. Immagini con pochi colori e separazioni nette possono essere salvate in maniera efficiente e senza perdita di qualità grazie a questo formato.

Anche se si tratta di un formato piuttosto semplice, GIF possiede un paio di interessanti qualità: trasparenza (ma non semi-trasparenza) e animazione.

Purtroppo, GIF è un formato inadatto a comprimere immagini con un moderato numero di colori; infatti, GIF ha una limite di 256 colori. Convertire una immagine con più di 256 colori risulta in un effetto posterizzato dall’aspetto sporco e impreciso.

 

GIF

 

 

In breve, GIF e JPEG hanno una serie di pregi e di difetti per i quali si adattano in modo perfetto al web.

 

Ma alcuni contenziosi riguardanti il brevetto sull’algoritmo LZW hanno ispirato alcuni individui nella creazione di un nuovo formato di immagine lossless (senza perdita di qualità) per il web.

 

PNG

Portable Network Graphics

PNG eccelle in tutti i tipi di immagine in cui funziona il formato GIF, con dei vantaggi aggiuntivi:

  • Non è limitato a 256 colori
  • Trasparenza in canale alpha (un pixel può essere parzialmente trasparente, invece che interamente trasparente o interamente opaco).
  • Nella maggior parte dei casi, una compressione superiore

Questa immagine presa da Wikipedia mostra la capacita di PNG di comprimere un’immagine a colori con aree semitrasparenti.

 

PNG_transparency_demonstration

 

Come è possibile che PNG abbia un algoritmo di compressione più efficiente di GIF? Questo traguardo è ottenuto aggiungendo dei passaggi al procedimento.

Prima di tutto, l’algoritmo PNG cerca di ridurre i dati salvati, utilizzando i pixel che già conosce per prevedere quelli che non sono ancora stati letti. Il formato prevede cinque strategie di previsione diverse, ma sostanzialmente, PNG assume che i pixel vicini tra loro siano simili. Se questa assunzione risulta vera, PNG salva i dati immagazzinando la differenza tra la sua previsione e il valore effettivo (piccoli numeri occupano un minore spazio).

In secondo luogo, PNG elimina le ripetizioni permettendo all’immagine di riferirsi a sequenze di pixel individuate in precedenza (invece di immagazzinare lo stesso dato due volte) utilizzando un algoritmo chiamato LZ77.

Al termine dei 2 procedimenti appena esposti, PNG utilizza un metodo chiamato “codifica di Huffman” per ridurre i valori rimanenti al minimo indispensabile (anche JPEG utilizza questa codifica come ultimo passaggio nel suo algoritmo).

 

Per riassumere il concetto: PNG funzionerà sempre peggio di JPEG per quanto riguarda le fotografie, ma meglio di GIF in tutti gli altri casi. Utilizzate PNG quando dovete salvare immagini con bordi definiti, tinte piatte o pattern dettagliati.