Il formato GIF (Graphics Interchange Format)

Presentazione sul tema: "Il formato GIF (Graphics Interchange Format)"— Transcript della presentazione:

1 Il formato GIF (Graphics Interchange Format)
Rea Alessandro matr. 50/226 Sassone Pietro matr. 50/305

2 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

3 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)

4 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.)

5 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

6 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

7 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

8 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

9 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

10 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

11 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.

12 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%

13 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

14 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

15 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

16 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

17 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

18 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

19 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

20 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

21 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

22 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

23 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

24 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

25 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

26 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

27 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

28 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

29 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

30 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

31 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

32 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

33 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

34 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:

35 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

36 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

37 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:

38 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

39 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

40 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

41 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

42 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

43 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

44 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

45 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

46 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

47 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

48 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

49 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)

50 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

51 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

52 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

53 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 

54 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:

55 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

56 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” – “GIF e la perdita dei colori” – “Creare GIF animate” – “Appunti sulla compressione” – A. Celentano –