Il formato GIF
(Graphics Interchange Format)
Rea Alessandro
Sassone Pietro
matr. 50/226
matr. 50/305
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 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 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 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 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 LZW
W = NIL
WHILE (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: 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 LZW
leggi un carattere k
visualizza k
w=k
WHILE (leggi un simbolo k)
entry=entry(k)
visualizza entry
aggiungi w + entry (0) al dizionario
w=entry
abcdabcabccabcceabcf
L’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 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 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-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 formato

Il formato GIF prevede due differenti
versioni
GIF87a (1987)
GIF89a (1989)

Analizziamo innanzitutto le specifiche del
primo e poi le novità introdotte dal
secondo
GIF87a: l’intestazione del file
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

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
Header
Occupa 6 byte
 Viene utilizzato per
identificare il file come GIF
 Definisce la versione (87a o
89a) 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
Logical Screen Descriptor


È 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
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
Global Color Table
È 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

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
GIF87a: l’immagine nel file
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

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
Local Image Descriptor



È 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
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
Local Image Descriptor

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)
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
Local Color Table
Se questa è presente, segue
immediatamente la Local
Image Descriptor e precede
l’immagine a cui è associata
 Il formato è identico a
quello della tabella globale

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
Dati di Immagine




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
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
GIF87a: la fine del file
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)

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
Linee 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’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 passi

I quattro passi operano come segue:
Il primo passo comincia dalla linea 0 e legge
una riga ogni otto
Il secondo passo comincia dalla linea 4 e legge
una riga ogni otto
Il terzo passo comincia dalla linea 2 e legge
una riga ogni quattro
Il quarto passo comincia dalla linea 1 e legge
una riga ogni 2
Esempio di interlacciamento
not-interlaced
0
0
1
8
2
4
3
12
4
2
5
6
6
10
7
14
8
1
9
3
10
5
11
7
12
9
13
11
14
13
15
15
interlaced
Interlaced 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 ?



È 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 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 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 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 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 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 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 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 file
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

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
Graphic Control Extension
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

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
Graphic Control Extension



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
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
Graphic Control Extension

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
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
Plain Text Extension
Consentono il mixing di
testo ASCII con immagini
bitmap, senza modificarle
 È possibile costruire un file
con solo testo senza
immagini bitmap

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
Plain Text Extension


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
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
Application Extension


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
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
Application Extension

Queste informazioni
consentono di semplificare
la visualizzazione
dell’immagine e di
coordinarla con altre
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
Comment Extension


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
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
Comment Extension

Le informazioni contenute
consentono di identificare:
la sorgente dell’immagine GIF
l’autore
il software utilizzato per la
creazione
date e ora di creazione
copyright
...
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 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 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 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 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 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 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 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 JPEG

Le caratteristiche delle due immagini sono
riportate nella seguente tabella:
Tipo
Colori
usati
Colori
permessi
Dimensione
del file
GIF
248
256
1 MB
16 milioni
365 KB
JPEG 207986
Bibliografia 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