Il formato GIF Il formato GIF ((GGraphics raphics IInterchange nterchange FFormat)ormat)

Rea Alessandro matr. 50/226Sassone Pietro matr. 50/305

Cos’è GIF ?Cos’è GIF ?

GIF (Graphics Interchange Format) è un formato di dati grafico creato da CompuServe (uno dei più noti provider di servizi telematici negli Stati Uniti, oggi parte di Aol Time Warner) per trasmettere in rete immagini grafiche in modo compresso e quindi molto rapido

Un formato di dati grafico è una specifica che descrive come memorizzare le caratteristiche di un’immagine su file

Un po’ di storiaUn po’ di storia

1987 – viene rilasciata la prima versione di GIF denominata GIF87a completamente libera e gratuita

1989 – viene rilasciata la nuova versione (attualmente la più utilizzata) denominata GIF89a

1995 – CompuServe e Unisys, legale detentore del brevetto sull’algoritmo di compressione utilizzato da GIF (LZW di cui parleremo dopo), annunciano che da questo momento in poi, per implementare il formato GIF, sarebbe stato necessario pagare delle royalty (quota diritti)

Come opera il formato GIFCome opera il formato GIF

Il formato GIF, a differenza di altri come ad esempio JPEG, non prevede un utilizzo massiccio della matematica, ma si basa essenzialmente sull’algoritmo di compressione LZW (Lempel-Ziv-Welch)

L’algoritmo LZW è una tecnica di tipo lossless (senza perdita) alla base anche di molti programmi di compressione di dati su disco (ZIP, ARJ, GZ, ecc.)

Compressione LZWCompressione LZW

L’algoritmo dispone inizialmente di una tabella di stringhe contenente l’insieme dei caratteri ASCII

Ogni carattere è situato nella cella indicizzata dal proprio valore ASCII (ad esempio ‘a’ sarà nella cella 97, ‘b’ nella 98 ecc.)

L’algoritmo costruisce dinamicamente il vocabolario dei simboli codificati

L’algoritmo LZWL’algoritmo LZW

L’algoritmo analizza la stringa da codificare carattere per carattere e, ad ogni passo, prova a costruire sottostringhe concatenando i caratteri man mano letti, come segue:se la sottostringa appartiene al dizionario, si

aggiunge a questa un ulteriore carattere letto dalla stringa di input, creando una nuova sottostringa

se la sottostringa non appartiene al dizionario, la si inserisce e, partendo dal suo ultimo carattere (cioè l’ultimo letto dalla stringa di input), si costruiscono nuove sottostringhe

Algoritmo di codifica LZWAlgoritmo di codifica LZW

W = NILWHILE (leggi un carattere k)

IF (wk esiste nel dizionario) w = wk //concatenazione//

ELSE aggiungi wk al dizionario visualizza il codice di w w=k

abcdabcabccabcceabcf

L’algoritmo LZW: decodificaL’algoritmo LZW: decodifica

Al termine della codifica viene generata la stringa compressa, a partire dalla quale il processo di decodifica deve risalire alle informazioni originarie

Per fare ciò il decodificatore ricostruisce passo passo il dizionario, in modo da riuscire ad ottenere tutte le informazioni non compresse

Algoritmo di decodifica LZWAlgoritmo di decodifica LZW

leggi un carattere kvisualizza kw = kWHILE (leggi un simbolo k)

entry=entry(k) visualizza entry aggiungi w + entry (0) al dizionario

w=entry

abcdabcabccabcceabcf

L’algoritmo LZW: conclusioniL’algoritmo LZW: conclusioni

Il risparmio di spazio in un file compresso con LZW dipende dal fatto che, per codificare le parole inserite nel dizionario, viene utilizzato un numero di bit più basso rispetto a quello necessario per codificare gli stessi elementi in maniera non compressa

Quanto più numerose e lunghe sono le stringhe che è possibile inserire nel dizionario, tanto maggiore sarà il coefficiente di compressione del file

L’algoritmo LZW è quindi asintoticamente ottimo

LZW applicato alle immaginiLZW applicato alle immagini

La compressione di immagini tramite l’algoritmo illustrato prevede una ricerca delle sequenze di pixel ripetuti (cioè quelli che sono affiancati da altri pixel dello stesso colore) in maniera analoga a quanto accade per la codifica di stringhe alfanumeriche

Maggiore è la ripetizione, migliore sarà la compressione.

Grado di compressioneGrado di compressione

Le immagini con grandi aree di colore come ad esempio quelle in bianco e nero sono adattissime alla creazione di file GIF poiché vengono compresse molto bene

Le immagini rilevate tramite scanner, ad esempio le fotografie, non hanno sequenze di pixel dello stesso colore e pertanto non possono essere comprese altrettanto bene

Con immagini a 8 bit per pixel è possibile raggiungere un rapporto di compressione di oltre il 40%

Immagini in sub-blockImmagini in sub-block

In genere le immagini LZW conservate in un file grafico sono uno stream continuo di dati che deve essere letto dall’inizio alla fine

Il formato GIF, al contrario, conserva le immagini in sottoblocchi di dati, come vedremo nell’analisi della struttura del file GIF

Due versioni del formatoDue versioni del formato

Il formato GIF prevede due differenti versioniGIF87a (1987)GIF89a (1989)

Analizziamo innanzitutto le specifiche del primo e poi le novità introdotte dal secondo

GIF87a: l’intestazione del fileGIF87a: l’intestazione del file

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Il file comincia sempre con un Header e un Logical Screen Descriptor, dopo il quale può comparire un Global Color Table

Tutte queste sezioni si trovano sempre allo stesso offset dall’inizio del file

HeaderHeader

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Occupa 6 byte Viene utilizzato per

identificare il file come GIFDefinisce la versione (87a o

89a) del file

Logical Screen DescriptorLogical Screen Descriptor

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

È visto come un secondo Header ed è conservato nella stessa struttura dell’Header

Descrive schermo e colori con cui è stata creata l’immagine, definendo ad esempio larghezza e altezza dello schermo (in pixel) e l’aspetto (rapporto tra larghezza e altezza) dei pixel

Global Color TableGlobal Color Table

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

È una sequenza di triplette di byte che contengono il rosso, il verde e il blu di ogni elemento

È opzionale e se non è specificata, allora viene utilizzata la Local Color Table relativa all’immagine

GIF87a: l’immagine nel fileGIF87a: l’immagine nel file

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

GIF prevede la memorizzazione sullo stesso file, di più immagini

Ogni immagine ha un Local Image Descriptor, una Local Color Table (opzionale) e un Blocco di dati immagine

Local Image DescriptorLocal Image Descriptor

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

È una struttura relativa all’immagine considerata e contiene informazioni relative all’immagine

Definisce le coordinate in pixel dell’angolo in alto a sinistra dell’immagine relative all’angolo in alto a sinistra dello schermo

Definisce le dimensioni dell’immagine in pixel

Local Image DescriptorLocal Image Descriptor

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Contiene un campo denominato Packed che:definisce se l’immagine

possiede o meno una propria Local Color Table

definisce se l’immagine è interlacciata (l’interlacciamento è illustrato in seguito)

Local Color TableLocal Color Table

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Se questa è presente, segue immediatamente la Local Image Descriptor e precede l’immagine a cui è associata

Il formato è identico a quello della tabella globale

Dati di ImmagineDati di Immagine

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Contiene i dati relativi all’immagine compressa con LZW

Le immagini sono conservate in sub-blocks

Ogni sub-block inizia specificando il proprio numero di byte

Dopo questo valore si trovano i dati immagine

GIF87a: la fine del fileGIF87a: la fine del file

Header

Logical Screen Descriptor

Global Color Table

Local Image Descriptor

Local Color Table

Dati di Immagine

Local Image Descriptor

Local Color Table

Dati di Immagine

……………………………

Local Image Descriptor

Local Color Table

Dati di Immagine

Trailer

Alla fine del file c’è un blocco di terminazione, detto Trailer

Il Trailer è un byte che vale sempre 3B (in esadecimale, cioè 59 in decimale)

Linee di immagineLinee di immagine

Normalmente le linee dell’immagine sono consecutive dalla prima all’ultima

È possibile anche un formato interlacciato, in cui l’ordine è diverso

L’interlacciamento rappresenta la principale caratteristica di GIF87a

L’interlacciamentoL’interlacciamento

L’interlacciamento è la capacità di produrre una visualizzazione graduale di un'immagine in una serie di visualizzazioni sempre più definite man mano che i dati arrivano al browser

Questo viene realizzato in quattro passi durante i quali sono codificate solo alcune linee dell’immagine

Ad ogni passo vengono codificate più linee rispetto al passo precedente, aggiungendo quindi nitidezza all’immagine

Interlacciamento: i 4 passiInterlacciamento: i 4 passi

I quattro passi operano come segue:Il primo passo comincia dalla linea 0 e legge

una riga ogni ottoIl secondo passo comincia dalla linea 4 e

legge una riga ogni ottoIl terzo passo comincia dalla linea 2 e legge

una riga ogni quattroIl quarto passo comincia dalla linea 1 e legge

una riga ogni 2

Esempio di interlacciamentoEsempio di interlacciamento0

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

0

8

4

12

2

6

10

14

1

3

5

7

9

11

13

15

interlacednot-interlaced

Interlaced vs not-interlacedInterlaced vs not-interlaced

Il grande pregio dell’interlacciamento è quello di offrire un’anteprima dell’area dell’immagine mentre questa viene scaricata sul browser

La stessa immagine non interlacciata verrebbe visualizzata progressivamente dall’alto al basso

Dopo aver scaricato il 50% dell’immagine non interlacciata sarebbe quindi disponibile solo la metà alta, mentre per l’immagine interlacciata si ha una prima visualizzazione grossolana dell’immagine già con l’invio di circa 1/8 dei dati-immagine complessivi

Interlacciamento: quando ?Interlacciamento: quando ?

È adatto a immagini GIF di grandi dimensioni come le illustrazioni e le fotografie

Non rappresenta una buona scelta per immagini GIF di piccole dimensioni (barre di navigazione, pulsanti, icone) in quanto queste vengono caricate su schermo molto più rapidamente se mantenute nel formato GIF non interlacciato

In generale l'interlacciamento non ha effetti significativi sulle dimensioni dei file d'immagine GIF

Le novità di GIF89aLe novità di GIF89a

GIF89a è la revisione più recente di GIF e risale al luglio del 1989

Contiene diversi blocchi in più rispetto a GIF87a e quindi non può essere letto correttamente dai lettori che supportano solo il primo formato

Le principali novità introdotte riguardano la possibilità di gestire le trasparenze e di creare animazioni

La trasparenzaLa trasparenza

GIF89a mette a disposizione un’opzione che permette, ad alcune zone dell’immagine, di assumere il colore dello sfondo della pagina su cui sono visualizzate

Ciò può essere realizzato specificando, tra i colori di una certa immagine, quale di questi debba lasciare il posto al colore dello sfondo, cioè diventare trasparente

La trasparenza non è selettiva nel senso che, se si rende trasparente un colore, ogni pixel dell’immagine con quel colore diventerà trasparente

Le animazioniLe animazioni

GIF87a consente la visualizzazione delle immagini una alla volta, come se fossero fogli separati

Le uniche animazioni possibili con il primo formato si ottengono dunque solo visualizzando più immagini una dietro l’altra

GIF89a consente la visualizzazione contemporanea di testo e grafica come effetti simili ad un’animazione

In realtà i software che realizzano GIF animate, lavorano direttamente con GIF89a

Come si creano le animazioniCome si creano le animazioni

Prima di tutto abbiamo bisogno delle immagini che costituiranno i frames

Queste devono essere file GIF e possono essere create con un qualsiasi programma di grafica come ad esempio Adobe Photoshop

Per esempio consideriamo le due immagini seguenti:

Il software da utilizzareIl software da utilizzare

Fatto ciò si può utilizzare uno dei tanti software che consentono la creazione di animazioni

Uno di questi è GIF Construction Set Pro v2.0

ftp://ftp.mindworkshop.org/pub/alchemy/gcsp20.exe

Modalità rimozione fotogrammiModalità rimozione fotogrammi

Una delle opzioni che è possibile settare quando si creano animazioni è la modalità di rimozione di un fotogramma dopo la sua visualizzazioneè possibile fissare un tempo (centesimi di secondo)

di ritardo dopo il quale avviene la rimozione e si passa alla visualizzazione della prossima immagine

è possibile stabilire che l'immagine rimanga visualizzata fino a che l'utente non batta un tasto o usi un bottone del mouse

se sono specificate entrambe, l'immagine rimane a video fino a quando la prima di queste due funzioni diventa attiva

Il risultato finaleIl risultato finale

Dopo aver settato tutti i parametri richiesti secondo le proprie esigenze, tramite il software scelto, viene creato il file .GIF

L’animazione ottenuta è la seguente:

GIF89a: la struttura del fileGIF89a: la struttura del file

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Il file ha molte sezioni analoghe a GIF87a come l’intestazione (Header, Logical Screen Descriptor e Global Color Table), il Trailer e le informazioni sull’immagine

Introduce alcuni nuovi blocchi per il controllo della visualizzazione

Graphic Control ExtensionGraphic Control Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Controllano la visualizzazione dei dati bitmap o di testo che si trovano nei blocchi Graphics Rendering

Specificano se la grafica deve essere sovrapposta in modo trasparente o opaco ad un’altra grafica

Graphic Control ExtensionGraphic Control Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Specificano se la grafica deve essere ripristinata o cancellata

Specificano se bisogna attendere l’input dell’utente prima di continuare

Possono comparire in qualsiasi numero e in qualunque posto nello stream di dati dopo la Global Color Table

Graphic Control ExtensionGraphic Control Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Consente di definire la trasparenza settando a 1 una flag denominata TrasparentColorFlag e indicando l’indice della tabella dei colori relativo al colore che si vuole rendere trasparente

Plain Text ExtensionPlain Text Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Consentono il mixing di testo ASCII con immagini bitmap, senza modificarle

È possibile costruire un file con solo testo senza immagini bitmap

Plain Text ExtensionPlain Text Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Per la visualizzazione del testo è specificata una griglia che lo contiene, definendone altezza, larghezza, posizione e le dimensioni della cella per un singolo carattere

I colori di foreground e background sono presi dalla Global Color Table mediante indici

Application ExtensionApplication Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Contengono informazioni specifiche dell’applicazione che sta leggendo e interpretando i dati, leggibili solo da questa applicazione

Queste informazioni permettono di cambiare il modo di funzionamento del video, applicare elaborazioni particolari alle immagini e memorizzare altre tabelle dei colori

Application ExtensionApplication Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Queste informazioni consentono di semplificare la visualizzazione dell’immagine e di coordinarla con altre

Comment ExtensionComment Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Contengono testo incorporato in uno stream di dati GIF che può essere usato come commento allo stesso modo dei linguaggi di programmazione come il C

I dati dei blocchi sono leggibili solo dall’utente che esamina il file e non dalle applicazioni che le visualizzano

Comment ExtensionComment Extension

Header

Logical Screen Descriptor

Global Color Table

Comment Extension

Application Extension

Graphic Control Extension

Local Image Descriptor

Local Color Table

Dati di Immagine

Comment Extension

Plain Text Extension

Trailer

Le informazioni contenute consentono di identificare:la sorgente dell’immagine GIFl’autoreil software utilizzato per la

creazionedate e ora di creazionecopyright...

Le limitazioni del formato GIFLe limitazioni del formato GIF

Il principale difetto del GIF è la possibilità di utilizzare un massimo numero di colori pari a 256

Questa limitazione può comportare una perdita di informazioni riguardanti il colore quando si tenta di riprodurre con questo formato, immagini codificate in uno spazio colore (RGB, CMYK, ecc.) non riproducibile integralmente per mezzo della tavolozza di 256 colori

La perdita dei coloriLa perdita dei colori

Allo scopo di visualizzare l’immagine in modalità GIF, la quantità di colori presenti nell'immagine originale viene drasticamente ridotta, ricorrendo ad una serie di algoritmi di trasformazione utilizzati prima ancora che sia applicata la compressione LZW

L'esito della riduzione sarà un'immagine codificata con un minimo di 1 bit per pixel (immagini in bianco e nero) fino ad un massimo di 8 bit per pixel (256 colori)

La perdita dei coloriLa perdita dei colori

La conversione operata sull'immagine originale trasforma i valori RGB di ciascun pixel in un valore RGB approssimato, dipendente dal tipo di tavolozza-colore prescelto per effettuare l'operazione

I valori cromatici di questa tavolozza saranno poi inglobati nel file GIF generato in modo da consentire, in fase di decompressione, di visualizzare un'immagine corrispondente ai valori salvati

Le tavolozze disponibiliLe tavolozze disponibili Tra le varie tavolozze disponibili, citiamo le

seguenti: adattata: cerca di mantenere i colori del file

compresso quanto più possibile simili a quelli del file originale

ottimizzata: codifica i 256 colori sulla base della loro presenza percentuale all'interno dell'immagine originale

uniforme: contiene uguali proporzioni di rosso, di verde e di blu

personalizzata: consente di aggiungere colori a scelta dell'utente fino a completare la gamma dei 256 possibili

Tavolozze e perdita dei coloriTavolozze e perdita dei colori

Qualsiasi sia la tavolozza adoperata, l'immagine ricostruita a partire dai dati salvati nel file GIF non sarà ovviamente uguale all'immagine RGB originale a causa della perdita del colore

La GIF sarà tanto più "povera" d'informazione quanto maggiore sarà il numero di colori presenti nell'immagine di partenza che vengono eliminati

Quando conviene GIFQuando conviene GIF

Si usa GIF quando l'immagine originale è a scala di colore, con un massimo di 256 colori

Se si parte da un’immagine con più di 256 colori può essere accettabile una sua conversione in scala di colore, ma è solitamente preferibile il formato considerare JPEG

In definitiva si utilizza GIF per le immagini i disegni ma non per le fotografie 

GIF vs JPEGGIF vs JPEG

E’ interessante fare un confronto tra GIF e JPEG su una stessa immagine di riferimento:

Questa è un’immagine JPEG a 16 milioni di colori; eseguendo un salvataggio in formato GIF a 256 colori si hanno i seguenti valori:

GIF vs JPEGGIF vs JPEG

Le caratteristiche delle due immagini sono riportate nella seguente tabella:

TipoTipo Colori Colori usatiusati

Colori Colori permessipermessi

Dimensione Dimensione del filedel file

GIF 248 256 1 MB

JPEG 207986 16 milioni 365 KB

Bibliografia consultataBibliografia consultata

Per la creazione di questa presentazione ci siamo avvalsi delle seguenti fonti bibliografiche:

“Enciclopedia dei Formati Grafici” di J. D. MURRAY & W. VANRYPER – Jackson Libri, 1997

“Tutto sul formato GIF89a” –http://www.microwebcom.com/

“GIF e la perdita dei colori” –http://www.diodati.org “Creare GIF animate”

–http://www.agatello.com/silvia.home “Appunti sulla compressione” – A. Celentano –

http://www.dsi.unive.it/~smm