« Codici colore e metodo RGB | Main | Il tag <img> e i collegamenti »

Immagini e formati di compressione

Nelle pagine HTML possono essere inserite immagini: in base alle specifiche di (X)HTML, possono essere collegate ad una pagina Web tutte le immagini in formato GIF, JPG e PNG. I tre tipi di immagini sono formati di compressione, che riducono il peso di un'immagine elaborata o creata con i più comuni software di grafica. Tutti i formati di compressione eliminano eventuali livelli presenti nell'immagine originale, e, qualora ricavati da un file vettoriale, lo trasformano in un file bitmap.

Il formato GIF

Le immagini GIF (Graphic Interchange Format) utilizzano un sistema di compressione detto Lossless, perché, comprimendo in GIF, non si modifica la qualità dell'immagine non compressa.

gifPer effettuare la compressione, il formato GIF memorizza solo le variazioni di colore su base orizzontale a partire dal primo pixel in alto a sinistra, fino a un massimo di 256 variazioni di colore. Vediamo un esempio pratico: immaginiamo che l'immagine a fianco rappresenti un'ingrandimento di un'immagine GIF, in cui ogni quadratino rappresenta un pixel. Il formato di compressione GIF inizia ad esaminare l'immagine a partire dal primo quadratino in alto a sinistra e procede in orizzontale. Per il primo quadratino GIF memorizza posizione e colore, poi passa ad esaminare il secondo. Dal momento che il secondo è esattamente dello stesso colore del primo quadratino, GIF lo salta, memorizzando solo che il secondo quadratino è uguale al primo. Così procedendo il secondo quadratino ad essere memorizzato, quello che cioè contiene la prima variazione di colore è il sesto.

GIF è in grado di memorizzare fino a 256 variazioni di colore. Alla fine dell'indicizzazione dei colori dell'immagine GIF ha costruito una palette di massimo 256 colori. La 257 variazione di colore viene sostituita automaticamente con il colore più vicino già memorizzato in palette. Per questo motivo, GIF è particolarmente utile per memorizzare immagini con grandi campiture di colore piatto, pochissime sfumature e, possibilmente, con un'organizzazione orizzontale (che presenta infatti meno variazioni su base orizzontale). Di seguito alcune immagini a confronto con il peso e l'estensione relativa:

Immagini a confronto
img1a img1b
GIF: 320bytes GIF: 215bytes
img2a img2b
JPG: 4 Kb GIF: 12 Kb
img3a img3b
GIF: 4,54 Kb JPG: 1 Kb
img3a img3c
GIF: 4,54 Kb GIF: 6,88

 

Il formato GIF supporta la trasparenza, ma in un modo del tutto particolare: GIF, infatti, memorizza i pixel trasparenti come "colorati di colore trasparente", ed inserisce la trasparenza fra i colori in palette. GIF non supporta invece i pixel parzialmente trasparenti, ossia, ad esempio, con opacità 50%.

Il formato JPG

Il formato JPG (o JPEG, da Joint Photographic Experts Group) - definito anche Lossy - comprime in maniera completamente diversa da GIF. Oltre ad eliminare i livelli, JPG chiede all'utilizzatore di impostare un livello di compressione compreso tra 0 e 100. In base al suo proprio funzionamento, JPG, leggendo il fattore di compressione, elimina le informazioni su un numero di pixel equivalenti - in percentuale - al fattore di compressione impostato (ad esempio: con fattore di compressione 50, si perde il 50% delle informazioni, con fattore 70 il 70%), e sostituisce il o i colori mancanti mescolando i colori adiacenti già memorizzati. Per questo motivo JPG modifica la qualità dell'immagine, perché la sostituzione dei pixel è arbitraria e legata ad un metodo matematico che non tiene affatto conto delle variazioni di colore.

Tuttavia il formato JPG è estremamente più potente di GIF e, se correttamente utilizzato, è in grado di comprimere molto immagini ad alta qualità, fotografie o disegni particolarmente sfumati, garantendo comunque buone prestazioni visive e ottimi "pesi" in Kb. Purtroppo, tuttavia, JPG non supporta la trasparenza.

Vediamo qualche esempio:

JPG a confronto
jpg100 jpg80
JPG (fc 0) : 11,7 Kb JPG (fc 20): 7,05 Kb
jpg60 jpg40
JPG (fc 40): 4,9 Kb JPG (fc 60) : 3,37 Kb
jpg20 jpg0
JPG (fc 80) : 2,60 Kb JPG (fc 100): 1,61 Kb
JPG100-2 JPG0-2
JPG (fc 0) : 2,87 Kb JPG (fc 100) : 577bytes