Il formato GIF (Graphics Interchange Format) Rea Alessandro matr. 50/226 Sassone Pietro 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 abcdabcabccabcceabcf 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

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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 …………………………… 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 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 8 4 12 2 6 10 14 1 3 5 7 9 11 13 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 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 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 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 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 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 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 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 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 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 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 JPEG 207986 16 milioni 365 KB

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