La presentazione è in caricamento. Aspetta per favore

La presentazione è in caricamento. Aspetta per favore

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

Presentazioni simili


Presentazione sul tema: "Il formato GIF (Graphics Interchange Format) Rea Alessandro matr. 50/226 Sassone Pietro matr. 50/305."— 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 unimmagine 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 sullalgoritmo 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 sullalgoritmo di compressione LZW (Lempel-Ziv-Welch) Lalgoritmo 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 Lalgoritmo dispone inizialmente di una tabella di stringhe contenente linsieme dei caratteri ASCII Ogni carattere è situato nella cella indicizzata dal proprio valore ASCII (ad esempio a sarà nella cella 97, b nella 98 ecc.) Lalgoritmo costruisce dinamicamente il vocabolario dei simboli codificati

6 Lalgoritmo LZW Lalgoritmo 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è lultimo letto dalla stringa di input), si costruiscono nuove sottostringhe

7 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

8 Lalgoritmo 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 Lalgoritmo 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 Lalgoritmo LZW è quindi asintoticamente ottimo

11 LZW applicato alle immagini La compressione di immagini tramite lalgoritmo 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 dallinizio alla fine Il formato GIF, al contrario, conserva le immagini in sottoblocchi di dati, come vedremo nellanalisi 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: lintestazione 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 dallinizio del file

16 Header 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 GIF Definisce la versione (87a o 89a) del file

17 Logical 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 dellHeader Descrive schermo e colori con cui è stata creata limmagine, definendo ad esempio larghezza e altezza dello schermo (in pixel) e laspetto (rapporto tra larghezza e altezza) dei pixel

18 Global 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 allimmagine

19 GIF87a: limmagine 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

20 Local 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 allimmagine considerata e contiene informazioni relative allimmagine Definisce le coordinate in pixel dellangolo in alto a sinistra dellimmagine relative allangolo in alto a sinistra dello schermo Definisce le dimensioni dellimmagine in pixel

21 Local 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 limmagine possiede o meno una propria Local Color Table definisce se limmagine è interlacciata (linterlacciamento è illustrato in seguito)

22 Local 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 limmagine a cui è associata Il formato è identico a quello della tabella globale

23 Dati 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 allimmagine 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

24 GIF87a: 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)

25 Linee di immagine Normalmente le linee dellimmagine sono consecutive dalla prima allultima È possibile anche un formato interlacciato, in cui lordine è diverso Linterlacciamento rappresenta la principale caratteristica di GIF87a

26 Linterlacciamento Linterlacciamento è 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 dellimmagine Ad ogni passo vengono codificate più linee rispetto al passo precedente, aggiungendo quindi nitidezza allimmagine

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 interlaced not-interlaced

29 Interlaced vs not-interlaced Il grande pregio dellinterlacciamento è quello di offrire unanteprima dellarea dellimmagine mentre questa viene scaricata sul browser La stessa immagine non interlacciata verrebbe visualizzata progressivamente dallalto al basso Dopo aver scaricato il 50% dellimmagine non interlacciata sarebbe quindi disponibile solo la metà alta, mentre per limmagine interlacciata si ha una prima visualizzazione grossolana dellimmagine già con linvio 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 unopzione che permette, ad alcune zone dellimmagine, 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 dellimmagine 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 laltra GIF89a consente la visualizzazione contemporanea di testo e grafica come effetti simili ad unanimazione 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 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 Lanimazione ottenuta è la seguente:

38 GIF89a: 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 lintestazione (Header, Logical Screen Descriptor e Global Color Table), il Trailer e le informazioni sullimmagine Introduce alcuni nuovi blocchi per il controllo della visualizzazione

39 Graphic 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 unaltra grafica

40 Graphic 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 linput dellutente prima di continuare Possono comparire in qualsiasi numero e in qualunque posto nello stream di dati dopo la Global Color Table

41 Graphic 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 lindice della tabella dei colori relativo al colore che si vuole rendere trasparente

42 Plain 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

43 Plain 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

44 Application 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 dellapplicazione 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

45 Application 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 dellimmagine e di coordinarla con altre

46 Comment 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 dallutente che esamina il file e non dalle applicazioni che le visualizzano

47 Comment 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 dellimmagine GIF lautore il software utilizzato per la creazione date e ora di creazione copyright...

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 limmagine 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 unimmagine 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 è unimmagine 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 MB JPEG milioni365 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 –http://www.diodati.org Creare GIF animate – Appunti sulla compressione – A. Celentano –


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

Presentazioni simili


Annunci Google