Telemat Lab's home page


Copyrigtht © 1986 Universita' di Firenze. All rights reserved.

Free license available.

Home Page Indice Server Push Plug in


Gif89a

Gif89a Indice


Gif89a

4.1 Introduzione alla tecnica

I passi per realizzare un'animazione Gif destinata ad una pagina HTML, sono i seguenti :

Gif89a Indice


Gif89a

4.2 Caratteristiche del formato Gif

Il formato Gif è senza dubbio uno dei formati grafici più diffusi insieme al formato Jpeg. Si basa su un algoritmo di compressione LZW di cui è proprietaria la Unisys Corporation. La Unisys non ha mai reclamato i diritti sul formato Gif, fino al 1995 anno in cui ha imposto ai produttori di software la registrazione e il pagamento dei diritti. Per aggirare l'ostacolo, alcune software house hanno sviluppato un formato alternativo al Gif chiamato PNG (Portable Network Graphic) dotato di trasparenza e interlacing. Il nuovo formato non ha riscosso grande successo e comunque non prevede la possibilità di memorizzare più immagini in un unico file, caratteristica di cui invece è dotato il Gif sin dalla versione Gif87a (87 indica l'anno in cui è stata sviluppata la versione). Questo formato prevede le seguenti specifiche:


Sebbene già con questa versione fosse possibile realizzare delle animazioni, il formato Gif87a non fu supportato da alcun software e quindi dimenticato. La versione successiva, la Gif89a, introdusse nuove e interessanti possibilità:

Il Netscape Navigator è stato il primo browser ad implementare il formato, anche se con un po' di esitazione. Successivamente si è aggiunta anche la Microsoft con il suo Internet Explorer 3.0.

Gif89a Indice


Gif89a

4.3 Struttura del formato Gif

I file Gif sono composti da Blocchi e Estensioni. I Blocchi possono classificati in tre gruppi:

I blocchi di controllo, come l'Header, il Logical Screen Descriptor, il Graphic Control Extension e il Trailer gestiscono i dati grafici. I blocchi grafici come l' Image Descriptor e il Plain Text Extension contengono i dati per visualizzare l'immagine. Infine i blocchi speciali quali il Comment Extension e l'Apllication Extension sono generalmente ignorati. Il Logical Screen Descriptor e il Global Color Table ( la palette ) hanno effetto su tutte le immagini, mentre ogni blocco di controllo solo con l'immagine successiva. Ecco come un file Gif può essere strutturato:

4.3.1 HEADER

Ogni file Gif inizia con il blocco Header che è presente sempre. E' composto da 6 byte e contiene sempre la versione del formato (ad esempio gif87a o gif89a). I programmi che permettono di visualizzare o manipolare file Gif usano sempre queste informazioni per determinare il tipo di formato e quindi decodificare le informazioni successive.

4.3.2 LOGICAL SCREEN DESCRIPTOR

Il Logical Screen Descriptor è sempre il secondo blocco del file. Definisce la grandezza dello schermo logico in cui l'immagine verrà visualizzata: in pratica indica le dimensioni in pixels dell'area in cui il file Gif verrà posizionato. Il browser sfrutta queste informazioni per lasciare lo spazio riservato alla visualizzazione dell'immagine. Se lo schermo logico è più grande dell'immagine contenuta nel file, verrà posto dello spazio vuoto attorno ad essa quando questa verrà mostrata.
Lo schermo logico dovrà essere abbastanza grande da visualizzare tutta l'immagine o tutte i frames che compongono l'animazione. Se una immagine nel file Gif è più grande dello schermo logico oppure, tramite un riposizionamento, esce dai bordi dello schermo, allora la porzione al di fuori non verrà visualizzata, con ovvie conseguenze.
Per esempio, la beta4 del Netscape generava un GPF (General Protection Fault) con Windows 3.x quando l'immagine era più grande del logical screen. Se si vuol costruire una animazione Gif, è importante quindi considerare le dimensioni di tutti i frame e impostare il logical screen in modo che possa contenerli tutti.

Il Logical Screen Block inoltre sceglie uno dei colori della Global Color Table (cioè la palette globale del Gif) come il colore di sfondo dello schermo logico. Questo colore però, è ignorato dal Netscape Navigator. Infatti, se lo schermo logico è più grande dell'immagine contenuta nel Gif, la porzione rimanente non viene riempita con il colore scelto nel Logical Screen Block, ma con il colore impostato dalla tag BGCOLOR della pagina HTML oppure, se non presente, da quello specificato nel menu preferenze del Navigator. Inoltre, se l'immagine Gif contiene una porzione trasparente, questa è completamente ignorata dal Netscape come si

es1.gif

può notare nell'esempio sotto.Affinchè la trasparenza abbia effetto occorre inserire prima dell'immagine un Control Block indicando il colore che deve essere trasparente: questo scelta viene riconosciuta anche dal Netscape che riempirà sia la porzione trasparente che quella circostante l'immagine con lo sfondo della pagina HTML (vedi esempio sottostante).

es2.gif

Un file Gif contiene una palette globale di colori comuni fra tutte le immagini che lo compongono. La palette globale è presente in ogni file Gif, anche quando raramente non è composta da nessun colore. Può avere 2, 4 , 8, 16, 32, 64, 128 oppure 256 colori. Le palette sono molto importanti perchè ogni colore presente nell' immagine deve provenire dalla palette. Se i colori di una immagine singola differiscono molto da quelli presenti nella global palette conviene definire una palette locale altrimenti si corre il rischio di alterare l'immagine quando questa viene visualizzata. Nella palette locale sono presenti solo i colori che si riferiscono ad una unica immagine. Naturalmente ogni immagine non può avere più palette locali, come non può avere più di 256 colori differenti.


4.3.3 APPLICATION EXTENSIONS

Questo blocco permette di inserire un insieme di dati all'interno del file Gif affinchè alcuni particolari programmi possono usufruirne. Queste informazioni sono di vario tipo e sono ignorate dai programmi a cui non sono destinate. Per esempio, la versione del Gennaio '95 del Gif Construction Set 1.0G per Windows inseriva un blocco di loop destinato al Netscape Navigator. Con questi blocchi, quindi, si possono specificare effetti o istruzioni riguardanti la manipolazione delle immagini. Generalmente, il programma che le definisce è anche il solo in grado di riconoscerle.

Netscape ha, come abbiamo visto, un suo Application Extension Block che lo informa di ripetere ciclicamente l'intero file Gif. Questo blocco deve apparire subito dopo la Global Color Table del Logical Screen Descriptor. Solo il Navigator 2.0 beta4 è in grado di riconoscere le informazioni contenute, mentre nelle versioni successive è stato abolito. Il blocco Netscape è formato da 19 bytes che rappresentano :

Dalla beta5, il numero delle iterazioni viene ignorato e il ciclo è diventato infinito (0 iterazioni indicano ciclo infinito).


4.3.4 GRAPHIC CONTROL BLOCK

Questo blocco gestisce la modalità con cui l'immagine deve essere visualizzata. Un Graphic Control Block ha effetto solo per l'immagine immediatamente seguente. Per questa ragione non deve essere incluso nessun blocco fra il Control Block e l'Image Descriptor Block.
Il Graphic Control Block definisce:
- se questa immagine possiede una palette locale
- se uno dei colori della palette locale è trasparente
- se per procedere nell'animazione è rischiesto un input dall'utente
- la durata della pausa fra l'immagine precedente e la successiva in centesimi di secondo.
- cosa deve essere fatto dopo che la successiva immagine è stata visualizzata (modalità di rimozione)

Generalmente si evita di usare una palette locale per ogni immagine in quanto può causare una perdità in nitidezza (dovuta al veloce cambiamento dei colori) ed inoltre aumenta notevolemente le dimensioni del file Gif : se tale file viene inserito in una pagina HTML, conviene limitare il più possibile le sue dimensioni poichè gravono pesantemente sul tempo necessario per la sua trasmissione.
Se la palette locale non esiste viene usata la palette globale ed uno dei suoi colori viene impostato come trasparente nel Control Block.

Quando si arriva all'Image Block, l'immagine viene immediatamente visualizzata sullo schermo. Così, se è impostato un tempo di ritardo (misurato in centesimi di secondo), si attende il suo esaurimento prima di rimuovere l'immagine e procedere con l'animazione. Se è specificato un input dall'utente, invece, si attende la pressione di un tasto della tastiera o del mouse. Quello che viene considerato effettivamente come input dell'utente è stabilito dal programma di visualizzazione del file Gif. Se entrambe le opzioni sono selezionate, l'immagine rimane finchè il ritardo non termina o finchè non viene premuto un tasto.

Infine, le modalità di rimozione delle immagini indicano come viene cancellata dallo schermo l'immagine corrente e come visualizzare la successiva. Abbiamo alcune possibilità :
- Nothing : non vengono effettuate alcun azioni.
- Leave as is: viene lasciata l'immagine sullo schermo (spesso equivale all'opzione sopra).
- Previous Image: l'immagine corrente viene sostituita da ciò che c'era prima; è difficile da implementare ma è la scelta più potente.
- Background: l'immagine viene cancellata con il colore di Background (se Il Navigator lo ignora viene usato il colore HTML di background specificato nelle opzioni).


4.3.5 IMAGE DESCRIPTOR BLOCK

L'Image block contiene i dati di una singola immagine che può essere di qualsiasi formato ed avere palette di dimensioni diverse : possiamo avere immagini con 2, 16, 256 colori ecc. tutte contenute in un unico file Gif. Oltre ai dati veri e propri dell'immagine abbiamo anche :
- le sue dimensioni in pixels
- la posizione dell'imagine nel logical screen descriptor
- se si tratta di una immagine interlacciata o meno.
- l'eventuale local palette.

La dimensione dell'immagine non può essere modificata, in quanto determina la quantità di dati necessaria per visualizzare l'immagine.

La possibilità di specificare la posizione dell'immagine dentro il logical screen risulta molto utile in quei casi in cui l'immagine vera e propria si muova all'interno di una certa zona : per esempio, possiamo usare immagini di dimensioni più piccole del logical screen e muovere l'immagine al suo interno agendo sulla posizione del pixel in alto a sinistra (la posizione 0,0 corrisponde al vertice in alto a sinistra dello schermo logico).

L'interlacciamento è un modo di salvare e visualizzare l'immagine Gif. Affinchè una immagine sia dotata di questa caratteristica occorre che sia stata salvata in tale modo, cioè in modalità interlacciata. Più precisamente, l'immagine nel file Gif non verrà memorizzata riga per riga, bensì a righe alternate. Ad esempio può avvenire che l'immagine sia memorizzata nel modo seguente:
passo 1: Ogni 8 righe partendo dalla riga 0
passo 2: Ogni 8 righe partendo dalla riga 4
passo 3: Ogni 4 righe partendo dalla riga 2
passo 4: Ogni 2 righe partendo dalla riga 1

Quando viene caricato un file Gif interlacciato, si creano vari effetti a seconda del programma di visualizzazione usato: alcuni mostrano le righe nell'ordine con cui sono state memorizzate; altri invece ,visualizzano grossi blocchi di pixel dello stesso colore, via via sempre più piccoli rendendo l'immagine sempre più definita creando l'effetto della progressiva messa a fuoco. In ogni caso l'interlacciamento consente all'utente di avere un'idea dell'immagine prima che questa sia stata completamente caricata. Nel caso di Internet, l'utente avrà la possibilità di interrompere il caricamento della pagina HTML qualora non sia interessato alle immagini presenti in essa. Non tutti i browser comunque sono dotati dell'interlacciamento: alcuni lo ignorano completamente, visualizzando l'immagine solo dopo averla completamente letta.


4.3.6 PLAIN TEXT BLOCK

In aggiunta alle immagini si può far visualizzare sullo schermo delle righe di testo. Sfortunatamente molti programmi, come il Netscape, non riconoscono questo blocco.


4.3.7 COMMENT BLOCK

E' possibile includere commenti nel file Gif riguardanti informazioni sull'animazione o sul realizzatore. Comunque è bene ricordare che tali commenti non appaiono sullo schermo, ma possono venire letti solo con alcuni programmi.


4.3.8 TRAILER

La funzione del Trailer è semplicemente quella di indicare la fine del file. Deve essere sempre presente e non deve essere modificato in alcun modo.

Gif89a Indice


Gif89a

4.4 I programmi per realizzare l'animazione

In commercio esistono pochi programmi di grafica o editor che permettono di realizzare animazioni secondo lo standard Gif89a e non sono disponibili per tutte le piattaforme. Quelli che presentiamo qui di seguito girano esclusivamente per Mac e Windows (anche se in futuro si prevede l'uscita di versioni per altri sistemi operativi) :

4.4.1 Gif Construction Set

Il Gif Construction Set è il programma che abbiamo utilizzato per realizzare le animazioni presenti in questa pagina. Non è un programma di grafica vero e proprio perchè non permette di ritoccare le immagini o di modificarle, ma consente di montare la sequenza di immagini per ottenere l'animazione finale. Il Gif Construction Set mette a disposizione una finestra in cui è possibile inserire i vari blocchi, immagini comprese, che definiscono la struttura del file gif89a. Un' esauriente analisi relativa ad ogni singolo blocco è riportata nel terzo capitolo.
Qui di seguito presentiamo un esempio di struttura relativa ad una animazione creata con il Gif Constrction Set :

E' possibile intervenire su praticamente ogni parametro previsto dallo standard Gif89a: si può impostare gli intervalli di tempo fra una immagine e la successiva, optare per una palette globale, scegliere il colore di trasparenza oppure rendere l'animazione ciclica, o ancora impostare la dimensione dello schermo logico ecc. E' anche prevista una comoda opzione di preview che permette di vedere in anteprima l'animazione prima di memorizzarla definitivamente nel file. Il programma è molto semplice da usare ma richiede una certa conoscenza dello standard Gif89a per poter gestire in maniera ottimale i vari blocchi di controllo. Il difetto principale è quello di essere un solo programma di conversione/ creazione dei file Gif essendo completamente assenti qualsiasi strumento per disegnare o ritoccare le immagini. Abbiamo apprezzato la presenza, nella documentazione elettronica fornita insieme al programma, di un esauriente manuale di istruzione e di un'approfondita informazione del formato Gif89a.
Il Gif Construction Set è un programma bookware prodotto dalla Alchemy Mindworks il cui sito WWW è http://www.north.net/alchemy/alchemy.html: il software può essere scaricato qui oppure via FTP a ftp.north.net nella directory /pub/alchemy.


4.4.2 WebPainter

A differenza del Gif Construction Set, il WebPainter è un vero e proprio programma di grafica dotato di un completo tool per disegnare e un serie di opzioni per realizzare facilmente animazioni. E' dotato degli elementi fondamentali di una applicazione di grafica 2D compresi filtri e effetti speciali. E' possibile importare immagini in vari formati fra cui PIC, filmati QuickTime, Gif89 e Gif. Per ora è disponibile solo la beta7 della versione 1.0 per Macintosh che è possibile scaricare a www.totallyhip.com/webpainter/2_webpnt.html.


4.4.3 GifBuilder

GifBuilder è una utility freeware attualmente solo per Macintosh che, come il Gif Construction Set, permette di creare animazioni Gif a partire da immagini PICT, GIF, TIFF Photoshop o convertendo filmati QuickTime,FilmStrip o PICs oppure tramite AppleScript. La versione attuale è la 0.4 che può essere trovata nei seguenti server:
in Svizzera :ftp://nic.switch.ch/mirror/info~mac/gst/grf/
in USA :ftp://ftp-2.amug.org/info~mac/gst/grf/
in USA :ftp://ftp.amug.org/pub/info~mac/gst/grf


4.4.4 GifMation

Un'altra utility con le stesse funzionalità del GifBuilder è GifMation anch'essa disponibile al momento solo per Macintosh. E' un programma shareware realizzato dalla BoxTop Software ed è scaricabile al sito www.airis.com/boxtop/GIFmation/welcome.html


4.4.5 Gif gIf giF

L'ultimo programma di questa rassegna è il Gif gIf giF che possiede le stesse opzioni dei precedenti programmi (GifBuilder e GifMation) ma forse va premiato per semplicità d'uso e funzionalità. La versione dimostrativa può essere scaricata al sito espresso.cafe.net/peda/desc.html

Gif89a Indice


Gif89a

4.5 Pregi e difetti

La tecnica di animazione che utilizza il formato gif89a è molto potente, perchè permette di realizzare sequenze di immagini veloci, con pochi disturbi e con ottima fluidità. Disponendo di un programma adatto, si possono realizzare animazioni in modo semplice e veloce, dotandole di trasparenza, iterazioni e interlacciamento. Inoltre le immagini memorizzate nel file Gif sono compresse con un algoritmo LZW e possono essere dotate di una palette di 2,4,8,16 ecc. fino a 256 colori. A differenza dei metodi client-pull e server-push nell'animazione non viene messo in gioco il server, nè sono necessari script CGI/PERL . Rispetto ai metodi basati sullo Shockwave e sul Sizzler, le animazioni Gif non necessitano di plug-in o software addizionale. La connessione con il server viene interrotta nel momento in cui viene caricato tutto il file Gif e quindi non è necessario trasmettere più volte tutte le immagini quando la sequenza è ciclica, come invece avviene nel caso delle tecniche client-pull o server-push. Infine possono essere presenti nella stessa pagina HTML più animazioni Gif indipendenti tra loro. Possono essere visualizzate su praticamente tutti i sistemi operativi anche se i programmi per crearle sono ancora pochi e disponibili principalmente per Mac e Windows.
E' senza dubbio una tecnica da preferire ai metodi client-pull e server-push. D'altra parte non possiede la potenza delle animazioni Java-based e Shockwave, perchè non è possibile creare animazioni interattive o dotate di suoni e musica. Inoltre, se l'animazione è formata da una lunga sequenza di immagini, la dimensione del file gif può risultare eccessiva (soprattutto se si utilizzano palette locali) tanto da scoraggiare il suo utilizzo sulla Rete. Una limitazione rilevante è il numero massimo di 256 colori in una palette che rende il formato Gif non adatto alla memorizzazioni di immagini con qualità fotografica per le quali si preferisce il formato Jpeg. Infine, l'ultimo problema di notevole importanza è che solo pochi browser riconoscono il formato gif89a : attualmente, solo il Netscape 2.0 o sup. e il MSIExplorer 3.0 o sup. Come abbiamo visto nei precedenti capitoli, il Netscape non lo supporta totalmente, in quanto ignora l'input dell'utente, non gestisce la modalità previous image di rimozione delle immagini e non visualizza il testo memorizzato nel Plain Text Block.
I browser che non riconoscono il formato Gif89a visualizzano solo la prima immagine ( per Windows alcuni sono : Cello,IExplorer prima del 3.0,Netscape prima del 2.0, NCSA Mosaic 2.0, Quartdeck Mosaic, Spry Mosaic; per Unix : NCSA Mosaic 2.7, Netscape prima del 2.0) oppure l'ultima immagine (per Windows AOL 2.5 e per Unix : Hotjava).

Gif89a Indice


Gif89a

4.6 Animazione di esempio

Presentiamo qui una serie di animazioni di esempio che hanno lo scopo di mostrare quanto detto nelle pagine precedenti.
Clicca qui per vedere le animazioni

Ultimo aggiornamento: 12 Novembre 1996


Telemat Lab's home page

Home Page Indice Server Push Plug in