aprile 2003
HOME  |  INDICE  |  CORSI  |  DIZIONARIO  |  ABBONAMENTI  |  SITO  |  HELP
 
   
  CORSI OPENMASTER
  MUSICA DIGITALE  
  WEBMASTER  
 
Lezione 1  
Lezione 2  
Lezione 3  
Lezione 4  
Lezione 5  
Lezione 6  
Editor HTML  
Esercizi  
Risorse  
 
  WINDOWS EXPERT  
 
 

Grafica per il Web

 

1. Eclettico GIF

Il Graphic Interchange Format è il più comune tra i formati per il Web. Si presta particolarmente per la codifica di disegni e grafici, ma può essere utilizzato anche per la memorizzazione di fotografie nel caso in cui volessimo usare due sue peculiarità: l'animazione e l'effetto trasparenza. Gode del supporto di tutti i browser in circolazione, offre una compressione molto efficace e permette anche di creare immagini con caricamento progressivo (interfacciate) per sveltire la visualizzazione della pagina senza rinunciare alla qualità finale. Inoltre la compressione offerta da GIF è di tipo "lossless" vale a dire che non comporta la perdita di dati, come invece accade nel caso del JPEG. Va comunque notato che i programmi più moderni consentono di eseguire una compressione con perdita anche con il formato GIF al fine di ridurne le dimensioni oltre quel che si riesce a fare agendo sul numero di colori.

Il formato GIF comprime l'immagine esaminando in orizzontale il contenuto di ciascuna riga e codificando qualsiasi variazione di colore. Ciò significa che immagini con ampi spazi di tinte unite vengono compressi con grandissima efficienza perché quando il colore non cambia, il formato si limita a registrare il valore indiziale e il numero di pixel per cui deve essere ripetuto. L'efficienza diminuisce al crescere degli elementi di colore diverso che tagliano l'immagine in verticale e precipita in presenza di sfumature di colore. Un esempio classico per vedere la differenza consiste nel comprimere un'immagine a strisce verticali e confrontarla con la stessa immagine a strisce orizzontali, su sfondo uniforme: la seconda, pur contenendo lo stesso numero di pixel e di colori, avrà una dimensione molto inferiore perché le variazioni su ciascuna riga saranno pochissime (vedi le figure di esempio).

Compressione variabile del formato GIF
Queste due immagini sono composte da colori pieni e perciò si adattano particolarmente alla compressione in formato GIF. Quest'ultima codifica le variazioni di colore registrate su ciascuna riga orizzontale, dunque vediamo che la seconda immagine, con le righe orizzontali, viene compressa molto meglio della prima, pur avendo dimensioni identiche e lo stesso numero di colori.


Clicca per ingrandire

Il limite importante del formato GIF sta nel fatto che può memorizzare al massimo 256 colori per ogni data immagine. Questi possono essere diversi ogni volta e costituire un campionamento di quel che l'immagine contiene (tavolozza adattata - adaptive palette) oppure provenire dalla tavolozza di sistema utilizzata sul particolare computer che dovrà visualizzare l'immagine. Una terza soluzione consiste nello scegliere colori presi dalla Websafe palette (di cui abbiamo parlato nella scorsa lezione) che elenca i 216 colori visualizzabili senza distorsioni sia su Macintosh sia su PC. Una quarta soluzione, abbastanza comune nei programmi di grafica moderni, consiste nel costruire una tavolozza adattata che contenga anche colori Websafe. Il programma esamina tutti i colori della tavolozza e ogni volta che ne trova uno vicino a un corrispondente colore Websafe lo sostituisce con quest'ultimo (Macromedia Fireworks MX chiama questa particolare tecnica Websnap, Adobe Imageready la chiama invece Selettiva). Infine abbiamo una quinta possibilità che consiste nel creare una palette che dà priorità ai colori che sono più facilmente percepibili dall'occhio umano, indipendentemente dalla frequenza con cui vengono usati nell'immagine (palette percettiva, usata da ImageReady e Photoshop).

I programmi di grafica compatibili con il formato GIF solitamente propongono in automatico una palette che conservi la miglior fedeltà possibile dell'immagine e ci permettono, poi, di "ottimizzarla" intervenendo su due parametri fondamentali: il numero di colori nella palette e la presenza o meno del "dithering". Quest'ultimo è un sistema per simulare le gradazioni utilizzando la combinazione di colori già presenti nell'immagine. Non aumenta perciò il numero di colori, ma incrementa comunque la dimensione del file aggiungendo informazioni che migliorano soprattutto le eventuali sfumature. Un parente prossimo del dithering è l'altialiasing, che consiste nell'usare sfumature di colore per attenuare i bordi netti dei caratteri tipografici di grandi dimensioni, riducendone l'effetto scalettatura. Il dithering è direttamente attivabile e disattivabile nel momento in cui generiamo l'immagine, l'antialiasing viene realizzato automaticamente se esistono colori a sufficienza.

Il numero dei colori è l'elemento che più di qualsiasi altro influenza la dimensione finale di un'immagine. Partendo da una qualsiasi delle numerose palette disponibili per il formato GIF, possiamo ridurre selettivamente il numero di colori così da aumentare la compressione dell'immagine. Di default si parte con una tavolozza di 256 colori, si può quindi scendere a 128, 64, 32, eccetera, oppure prendere la scorciatoia e chiedere la programma di generare una palette "esatta", cioè contenente l'esatto numero di colori effettivamente presenti nell'immagine. Le due strade non sono equivalenti. La tavolozza esatta consente infatti di eliminare semplicemente le posizioni non occupate all'interno della codifica GIF e produce effetti apprezzabili solo su immagini che abbiamo già pochi colori di partenza. La riduzione manuale forzata dei colori, invece, permette di scalare la dimensione del file in modo controllato, alterandone l'aspetto, ma in modo poco visibile. Potete anche bloccare particolari colori che non debbano essere eliminati dalla scalatura, arrivando a dimensioni che sono anche meno della metà dell'originale di partenza. Per semplificare queste scelte, tutti i programmi di ottimizzazione per Web aprono due o quattro finestre che permettono di confrontare visivamente l'originale di partenza con la versione ottimizzata, della quale possono esistere contemporaneamente quattro varianti.

Ottimizzare le immagini
Tutti i moderni programmi di elaborazione delle immagini (qui vediamo ImageReady di Adobe) offrono la possibilità di aprire finestre multiple in cui confrontare l'immagine originale con le versioni ottimizzate. Qui vediamo una scritta di testo che si adatta particolarmente bene alla codifica GIF. Nella prima finestra abbiamo una versione con palette selettiva a 32 colori (ce ne sono 17 in totale nell'immagine) che pesa 2,52 Kbyte. Nella seconda finestra in alto abbiamo la stessa immagine ridotta però a 2 colori (il minimo) che pesa 1,386, ma che perde la possibilità di utilizzare le sfumature di arancione e di blu per realizzare l'antialiasing come vedremo. Nelle altre due finestre abbiamo utilizzato il formato JPEG con qualità bassa (30) e bassissima. Le dimensioni sono rispettivamente 6.06 Kbyte e 4,105 Kbyte, perciò entrambe superiori al formato GIF e con una perdita di qualità vistosa.


Clicca per ingrandire

GIF e antialiasing del testo
Qui vediamo la stessa immagine precedente, ingrandita per osservare meglio i contorni del testo. Notiamo che la versione GIF a 2 colori mostra calettature visibili poiché vengono a mancare gli altri colori intermedi che in questa immagine servono per realizzare l'antialiasing. Volendo è possibile scendere a 8 bit, comprimendo l'immagine senza perdere l'effetto aliasing in modo apprezzabile. Qui vediamo anche lo scempio operato sul testo dal formato di compressione JPEG, del tutto inadatto a elaborare immagini con colori pieni.


Clicca per ingrandire

Ottimizzare il numero di colori
Un esempio di ottimizzazione d'immagine GIF realizzata mediante la riduzione dei colori. Nella finestra in altro a sinistra vediamo un logo che richiede 32 colori per essere rappresentato fedelmente, la dimensione dell'immagine è di 5,103 Kbyte. Nella finestra a fianco abbiamo ridotto i colori a 16 e la dimensione è scesa a 3,178 Kbyte, ma notiamo una leggera alterazione del petalo Magenta in basso a destra. Passiamo alla terza finestra, in basso a sinistra. Qui siamo scesi a 8 colori con una dimensione di 2,434 Kbyte, meno di metà del file originale. Il logo è ancora riconoscibile benché il magenta e il rosso non siano più fedeli e la scritta abbia cambiato colore. La quarta versione con soli 4 colori è diventata naturalmente irriconoscibile.


Clicca per ingrandire


  < Precedente   Prossimo >

 

Corso - Webmaster
 
  Prima lezione:
  Competenze e strumenti
  Seconda lezione:
  Siti statici e linguaggio HTML
  Terza lezione:
  Modelli di pagina e tabelle
  Quarta lezione:
  HTML 4.01 e CSS
  Quinta lezione:
  Design e multimedialità
1. Elemeni di Web design
  1. La ruota colore del Web
2. Grafica per il Web
  1. Eclettico GIF
  2. Trasparenza e animazione
  3. JPEG per le fotografie
  4. PNG tuttofare
3. Link ipertestuali
4. Tabelle d'immagini
5. Mappe immagini
  Sesta lezione:
  Siti interattivi

 Copyright© PC Open - 2002 - 2003

Credits