Il formato GIF (Graphics Interchange Format) Rea Alessandro matr. 50/226 Sassone Pietro matr....
-
Upload
giuliana-andreoli -
Category
Documents
-
view
219 -
download
0
Transcript of Il formato GIF (Graphics Interchange Format) Rea Alessandro matr. 50/226 Sassone Pietro matr....
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