Il tag - Sergio Fumich

Giorno dopo Giorno - Scritture quotidiane
Un blog di Sergio Fumich – www.sergiofumich.com
Helps & Tools for the Web and Webmasters
IL TAG <IMG>
LA GRAFICA IN UNA PAGINA WEB
1
IL TAG <IMG>
Per inserire un'immagine in una pagina HTML basta inserire il tag:
<IMG SRC="nome immagine">;
questo tag non ha bisogno di chiusura. Affinché l'immagine venga visualizzata nella pagina web
bisogna specificarne il nome, l'estensione e l'eventuale percorso.
Usando il tag così semplicemente, l'immagine appare allineata alla base della riga di testo
corrispondente, senza spazi aggiuntivi e mantiene le sue dimensioni assolute.
Alcuni attributi del tag <IMG> che permettono di personalizzare l'impaginazione dell'immagine.
Possiamo definire le dimensioni di visualizzazione di un'immagine specificando gli attributi
WIDTH (larghezza in pixel) e HEIGHT (altezza in pixel).
Ad esempio:
<IMG SRC="image.jpg" WIDTH="100" HEIGHT="50">
Quando si specificano le dimensioni di un'immagine è necessario conoscerne le dimensioni effettive
per mantenere inalterato il rapporto larghezza/altezza evitando così di deformare l'immagine.
Anche se si vuole visualizzare l'immagine a grandezza naturale è sempre preferibile specificare i
valori di WIDTH e HEIGHT perché così il browser ha maggiori informazioni per collocare
immediatamente in modo corretto l'immagine nella pagina, il cui caricamento risulta molto più
rapido.
Si può definire l'allineamento dell'immagine rispetto al testo circostante mediante l'attributo
ALIGN.
Esempio:
<IMG SRG="image.jpg" ALIGN="bottom">
I valori di ALIGN ammessi sono:
‰ Bottom: il lato inferiore dell'immagine appare allineato alla base della riga di testo (valore
predefinito);
‰
Middle: il punto mediano dell'altezza dell'immagine si allinea alla base della riga di testo; il
testo si spezza e prosegue sotto l'immagine;
‰
Left: l'immagine si posiziona sul lato sinistro della pagina e il testo scorre intorno a lei sul lato
destro;
‰
Right: l'immagine si posiziona sul lato destro della pagina e il testo scorre intorno a lei sul lato
sinistro.
Nel caso in cui si voglia allontanare l'immagine dal testo si può aumentare lo spazio vuoto che
circonda l'immagine attraverso gli attributi VSPACE (spazio verticale, in pixel) e HSPACE (spazio
orizzontale, in pixel).
Ad esempio scrivendo:
<IMG SRC="image.jpg" VSPACE="10" HSPACE="20">
oltre ad inserire nella pagina web image.jpg si specifica che sopra e sotto l'immagine devono
rimanere 10 pixel vuoti, e a destra e sinistra dell'immagine devono rimanere 20 pixel vuoti.
2
Si può anche aggiungere un bordo intorno all'immagine tramite l'attributo BORDER che deve
essere espresso in pixel secondo la sintassi:
<IMG SRC="image.jpg" BORDER="5">
Un attributo fondamentale del tag <IMG> è ALT (testo alternativo). Grazie a tale attributo si può
definire una didascalia associata all'immagine.
La sintassi corretta è:
<IMG SRC="nome immagine" ALT="breve descrizione testuale">
Questa didascalia associata all'immagine appare durante il caricamento della pagina o quando si
passa con il mouse sopra l'immagine.
I vantaggi principali dell'usare l'attributo ALT sono:
‰ i visitatori possono capire prima del caricamento completo il contenuto delle immagini;
‰
i browser speciali per non-vendenti sono in grado di interpretare correttamente la pagina;
‰
diversi motori di ricerca tengono conto del valore dell'attributo ALT delle immagini di una
pagina per catalogarla con precisione.
Ad ogni immagine si può associare un collegamento ipertestuale includendo il tag <IMG>
all'interno della coppia di tag <A HREF> e </A> secondo la sintassi:
<A HREF="index.html"><IMG SRC="index.gif"></A>
Associare un collegamento ipertestuale ad un'immagine è molto utile quando si vuole creare ad
esempio un menù grafico di navigazione per un sito web.
Creando immagini ad hoc come icone o pulsanti il visitatore né intuirà la funzione a colpo d'occhio.
Quando un'immagine è cliccabile, appare generalmente circondata da un bordo generalmente di
colore blu che risulta anti-estetico. In questo caso basta indicare all'interno del tag <IMG>
l'attributo BORDER="0" per fare in modo che il bordo resti invisibile.
3
2
Immagini digitali
Ogni immagine digitale è caratterizzata da tre aspetti: risoluzione, profondità di colore,
formato/compressione.
2.1
Risoluzione: rapporto tra dimensioni e qualità visiva dell'immagine.
La risoluzione comprende due aspetti:
‰ Quantità di punti che compongono effettivamente l'immagine;si misura in pixel.
Esempio: 640 x 480 (640 pixel orizzontali x 480 verticali), 1024 x 768 e così via.
‰
2.2
Densità dei punti nella visualizzazione o stampa; si misura in dpi (dot per inch, punti per
pollice).
Esempio: 72 dpi, 300 dpi e così via.
Profondità di colore: numero massimo di colori possibili.
Si misura in bit.
Valori tipici: 8 bit (256 colori), 16 bit (65mila colori), 24 bit (milioni di colori).
2.3
Formato/compressione: formato di salvataggio o codifica del file.
Alcuni formati permettono di comprimere i dati, ottenendo file di dimensioni ridotte. Certi metodi
di compressione (detti lossy o distruttivi) possono, però, influire negativamente sulla qualità
dell'immagine.
Esempio di formato non compresso: BMP (Windows/OS2 Bitmap).
Esempi di formati compressi: TIFF, GIF, JPEG, PNG.
2.4
I formati usati per il Web.
Ciascuno dei tre aspetti concorre a determinare le dimensioni complessive del file dell'immagine: a
parità di risoluzione, una maggiore profondità di colore produce un file più ingombrante, e così via.
Attualmente nel Web vengono usati solo tre formati per le immagini: GIF, JPEG e PNG.
Questi formati comprimono le dimensioni dei file delle immagini per ridurre i tempi di caricamento.
E' importante sapere quale formato utilizzare per ogni diverso tipo di immagine.
Se si sceglie un formato errato, l'immagine potrebbe non venire compressa a sufficienza o potrebbe
non avere l'aspetto desiderato.
In ogni caso per creare un sito Web attraente occorre utilizzare la grafica con accortezza.
Se si usano immagini in quantità eccessiva, i tempi di caricamento delle pagine Web risulteranno
troppo lunghi e gli utenti generalmente non sono intenzionati ad attendere.
Allora si deve bilanciare accuratamente il testo e le immagini sfruttando le funzionalità grafiche del
linguaggio HTML per rispondere alle esigenze degli utenti.
4
3
I colori
Per riprodurre nel modo più fedele possibile la gamma dei colori visibili in natura si ricorre
normalmente alla miscelazione di alcune tinte di base: dalla loro combinazione si ottengono tutte le
sfumature intermedie.
Questa miscelazione si basa su due diverse tecniche o metodi:
‰
La sintesi sottrattiva, basata sull'assorbimento e dunque sulla sottrazione della luce da parte
dei corpi fisici.
Questa tecnica si applica per la stampa dei colori su carta o su altri supporti.
I colori di base in questo caso sono il ciano, il magenta, il giallo e il nero; la sintesi sottrattiva
viene perciò indicata con la sigla CMYK (Cyan, Magenta, Yellow, black).
‰
La sintesi additiva, basata sull'emissione e dunque sull'addizione o sovrapposizione della luce
grazie a dispositivo di proiezione.
Questa tecnica si applica per la visualizzazione dei colori su schermi e monitor.
I colori di base in questo caso sono il rosso, il verde e il blu; la sintesi additiva viene perciò
indicata con la sigla RGB (Red, Green, Blue).
Poiché le pagine Web hanno come applicazione primaria la visualizzazione sui monitor, il metodo
di riferimento per la gestione dei colori è la sintesi additiva (RGB). Ogni possibile tonalità di colore
è definita da una combinazione di valori delle tre componenti di base: rosso, verde e blu.
In pratica, ogni colore è identificato da tre valori (numeri): il primo indica la "quantità" di rosso
presente nel colore in questione; il secondo la "quantità" di verde; il terzo la "quantità" di blu.
Ciascuno di questi tre valori può variare da 0 (minimo: componente non presente) a 255 (massimo:
componente dominante).
Ad esempio il nero corrisponde ai valori RGB 0, 0, 0, il bianco corrisponde ai valori RGB 255, 255,
255.
5
4
Codifica esadecimale
Nel linguaggio HTML per indicare i valori RGB si utilizza il sistema di codifica esadecimale
anziché quello decimale.
I numeri esadecimali si basano su un sistema di numerazione in base 16 che comprende le cifre da 0
a 9 e da A a F.
I codici esadecimali dei colori sono costituiti da numeri di sei cifre. Le prime due cifre definiscono
il livello del rosso, le seconde due cifre definiscono il livello del verde e la terza coppia di cifre
definisce il livello del blu.
Questi valori si possono usare in vari elementi del codice HTML, ma importante sapere che devono
essere sempre racchiusi fra doppi apici e preceduti dal segno #.
Quando si scrive il codice HTML è possibile specificare il nome dei colori al posto del valore
esadecimale, ma non tutti i browser supportano questi nomi, per cui in ogni caso è preferibile
utilizzare i valori esadecimali.
Anche la visualizzazione dei colori può essere diversa a seconda del browser o del sistema
operativo utilizzato.
La stessa pagina (con gli stessi colori) potrebbe apparire diversa se visualizzata da un Pc o da un
Mac, da un browser piuttosto che da un altro.
Questo è purtroppo un limite intrinseco delle tecnologie Web e non c'è modo di garantirsi
un'assoluta fedeltà di riproduzione di colori.
La tabella seguente mostra i 16 nomi dei colori riconosciuti dalla maggior parte dei browser, che
sono stati elencati nelle specifiche Html 4.0 prodotte dal consorzio W3C.
Nome del
colore
Aqua
Black
Blue
Fucsia
Gray
Lime
Maroon
4.1
Codice
Esadecimale
00FFFF
000000
0000FF
FF00FF
808080
00FF00
800000
Nome del
colore
Navy
Olive
Purple
Red
Silver
White
Yellow
Codice
Esadecimale
000080
808000
800080
FF0000
C0C0C0
FFFFFF
FFFF00
Tavolozza universale.
È una tavolozza a 216 colori che rappresenta i colori predefiniti utilizzati dai browser, che non
possono essere modificati quando i sistemi degli utenti sono in modalità 256 colori.
nel contrasto.
Tutti i numeri di questi colori sono formati dalla combinazione di 00, 33, 66, 99, CC e FF, cioè in
valori RGB, dalla combinazione di 0, 51, 102, 153, 204 e 255.
6
5
Leggibilità
Quando si progetta una pagina web la priorità maggiore è la leggibilità su schermo, quindi il
cambiamento dello sfondo di pagina da grigio a bianco è la sola modifica dello sfondo standard di
pagina Web che è raccomandabile.
La leggibilità dei caratteri sullo schermo del computer è già compromessa dalla bassa risoluzione
dello schermo stesso, il tipico schermo dei computer Macintosh o Windows visualizza il testo a
72/80 punti per pollice (circa 5.200 punti per pollice quadrato), ossia una risoluzione quasi 300
volte inferiore rispetto a quella di una tipica pagina di rivista (1.440.000 punti per pollice quadrato).
Il testo nero su uno sfondo bianco (o grigio molto chiaro) produce il contrasto migliore dei caratteri
e la migliore leggibilità.
Gli sfondi neri sono assai meno leggibili di quelli bianchi, anche quando si utilizzano caratteri
bianchi per ottenere il massimo contrasto.
Gli sfondi colorati possono funzionare come alternativa al grigio predefinito dei browser se i colori
vengono mantenuti in tonalità molto attenuate e con una saturazione di colore bassa (i pastelli, i
grigi chiari e le tonalità di marrone chiaro sono i più adatti).
L'abbinamento tra colori complementari ad esempio giallo e blu può essere considerato armonioso.
Viceversa, abbinare colori fortemente contrastati ad esempio rosso e blu tende ad affaticare l'occhio
del lettore e andrebbe dunque evitato.
Va ricordato che i colori delle pagine Web, in quanto visualizzati su un monitor, sono mediamente
più vividi e brillanti dei corrispettivi stampati su carta.
Per scegliere i colori dello sfondo e del testo è bene affinare il proprio senso estetico basandosi sulle
più elementari norme grafiche.
7
6
Norme tipografiche
La tipografia è l'equilibrio e l'interrelazione tra la forma delle lettere sulla pagina. Costituisce una
sorta di equazione verbale e visiva che aiuta il lettore a comprendere la forma e ad assorbire la
sostanza del contenuto.
Essa svolge un doppio ruolo in qualità di comunicazione verbale e visiva; infatti man mano che i
lettori analizzano una pagina, sono inconsciamente consapevoli di entrambe queste funzioni: per
prima cosa studiano i modelli grafici generali della pagina e poi analizzano il linguaggio leggendo il
testo.
Una buona tipografia stabilisce una gerarchia visiva per la prosa sulla pagina e fornisce
punteggiatura visiva e accenti grafici che aiutano il lettore a capire le relazioni tra la prosa e le
immagini, i titoli e i blocchi subordinati di testo.
Anche se le regole di base della tipografia sono molto simili per le pagine Web e i documenti di
stampa tradizionali, i caratteri stampati su carta e quelli visualizzati su schermo mostrano differenze
non trascurabili.
Innanzi tutto lo schermo di un computer visualizza i caratteri tipografici ad una risoluzione assai
inferiore rispetto a quella dei libri e delle riviste. Infatti la tipografia delle riviste e dei libri è in
maggior parte composta da 1200 punti per pollici (dpi), mentre lo schermo di un computer
visualizza raramente più di 85 dpi.
Inoltre l'area utilizzabile di uno schermo standard è molto inferiore rispetto alle pagine dei libri e
delle riviste, e questo limita la quantità di informazioni visualizzabili su una pagina web senza
scorrimento.
La peculiarità della tipografia Web è data dalla sua variabilità: le pagine Web vengono create al
momento dello scaricamento sul browser Web; ogni singola riga di testo, titolo, carattere e relativo
stile sono ricreati al momento dello scaricamento da un'interazione tra browser, server Web e
sistema operativo dell'utente.
Quindi, un carattere mancante, un browser obsoleto, o un set particolare di caratteri non presente,
rappresentano una serie di imprevisti del processo di visualizzazione di una pagina web. Per le
probabilità che accada uno di tali imprevisti, un autore Web non può essere sicuro al 100% che ogni
lettore visualizzi le pagine sullo schermo così come le ha progettate.
6.1
Allineamento.
I blocchi di testo si inseriscono tra i margini in modi diversi; le opzioni di allineamento disponibili
sul web sono:
‰ Giustificazione a destra; i blocchi di testo allineati a destra sono difficili da leggere, perché nel
mondo occidentale leggiamo da sinistra a destra ancorandoci alla linea verticale del margine
sinistro.
La giustificazione del testo a destra crea dei margini sinistri irregolari e questi rende difficile la
lettura perché l'occhio deve cercare l'inizio di ogni nuova riga.
‰
Giustificazione al centro; sconsigliabile per le stesse motivazioni della giustificazione a destra.
‰
Giustificazione a sinistra; è l'opzione più leggibile per le pagine Web, perché il margine
sinistro è uniforme e prevedibile e quello destro è irregolare.
L'irregolarità del margine destro aggiunge diversità e interesse alla pagina, senza interferire con
la leggibilità.
Testo giustificato; i blocchi di testo giustificato creano rettangoli pieni e le intestazioni dei
blocchi sono generalmente centrate per ottenere documenti dall'aspetto simmetrico e formale.
‰
8
Non tutti i browser offrono un pieno controllo a questo tipo di allineamento, quindi il testo
giustificato nelle pagine web va usato con cautela.
6.2
Allineamento dei titoli di pagina o di paragrafo.
Sul testo giustificato a sinistra i titoli e le intestazioni dovrebbero a loro volta essere allineati a
sinistra.
Le intestazioni allineate al centro si adattano bene al testo giustificato, che però non si dovrebbe
usare per le pagine web.
Le intestazioni allineate a centro su testo giustificato a sinistra sono in netto contrasto con
l'asimmetria del margine destro ed il risultato è una pagina sbilanciata.
6.3
Lunghezza di riga.
Si è detto che il testo visualizzato su schermo è difficile da leggere per via della bassa risoluzione
degli schermi. Anche la lunghezza delle righe di testo delle pagine Web gioca un ruolo
fondamentale per la leggibilità.
Righe di testo troppo ampie richiedono al lettore di spostare leggermente la testa o di affaticare i
muscoli dell'occhio; allora la leggibilità ne soffre perché, lungo la distanza di ritorno al margine
sinistro, il lettore può perdere la posizione della nuova riga.
È opportuno restringere la lunghezza delle righe di testo a circa 60/70 caratteri per riga.
Il conteggio esatto dei caratteri è difficile da prevedere perché le dimensioni dei caratteri variano a
seconda dei browser e dei sistemi operativi.
Una soluzione consiste nell'usare tabelle di layout di pagine con celle di testo non superiori a 365
pixel di larghezza.
Ad esempio utilizzando il carattere Times New Roman da 12 punti, tale larghezza di cella produce
una riga lunga circa 50 caratteri con una media di circa nove/dieci parole per riga.
Partendo da questa base si possono variare caratteri e dimensioni per ottenere il migliore equilibrio
tra efficienza spaziale e leggibilità.
6.4
Interlinea.
Anche l'interlinea influenza notevolmente la leggibilità dei blocchi di testo: un'interlinea eccessiva
rende difficile all'occhio trovare l'inizio della riga successiva, mentre un'interlinea troppo ridotta
confonde le righe di caratteri.
Nella stampa tradizionale si imposta l'interlinea dei blocchi di testo sommando circa 2 punti alle
dimensioni dei caratteri; ad esempio un carattere a 12 punti dovrebbe essere impostato con
un'interlinea di 14 punti.
L'HTML semplice non ha un controllo affidabile sull'interlinea. Se si vuole gestire correttamente
l'interlinea bisogna ricorrere ai fogli di stile.
6.5
Caratteri.
Il tipo di carattere utilizzato è uno degli elementi più importanti di un sito Web ben realizzato.
Tutti coloro che visiteranno il sito Web risponderanno in modo istintivo a un determinato tipo di
caratteri.
Nella progettazione di pagine Web la scelta dei caratteri da usare non è molto vasta ma bisogna
limitarsi all'uso dei caratteri predefiniti residenti nella maggior parte dei sistemi operativi.
9
Infatti se nelle nostre pagine Web specifichiamo un font che non è disponibile sul sistema
dell'utente, il suo browser lo sostituirà con il font standard, che nella maggior parte dei browser è il
Times New Roman.
I caratteri predefiniti residenti nella maggior parte dei sistemi operativi sono: Arial, Courier,
Georgia, Times New Roman, Trebuchet e Verdana.
La leggibilità su schermo dipende soprattutto dalla cosiddetta altezza x (l'altezza di una x
minuscola) e dalla dimensione generale del carattere.
Cosi un tipo di carattere come Times New Roman ha una leggibilità media sullo schermo del
computer perché ha un'altezza x moderata. Questo carattere è consigliato nei documenti con molto
testo che probabilmente saranno stampati e non letti sullo schermo.
Invece caratteri quali Georgia e Verdana sono stati progettati per essere letti su schermo, infatti
hanno altezze x esagerate e sono molto grandi, se paragonati a tipi di caratteri più tradizionali con la
stessa dimensione di punti.
Le altezze x esagerate e la forma pesante di questi caratteri conferiscono però un aspetto massiccio
e rozzo al documento se questo viene stampato.
Lo schema più convenzionale per l'uso dei caratteri impone di utilizzare un carattere con grazie
come Times New Roman o Georgia per il testo ed un carattere senza grazie come Verdana o Arial
come contrasto per i titoli.
Questo schema può essere considerato come suggerimento o punto di partenza per la scelta dei
caratteri delle proprie pagine Web; ogni progettista Web è libero di scegliere i caratteri da usare
testandoli opportunamente sullo schermo per produrre un ragionevole equilibrio tra densità
d'informazioni e leggibilità generale.
È consigliabile comunque, utilizzare pochi font e poche dimensioni, per dare alle pagine un aspetto
più chiaro, così come, per dare uniformità, si deve applicare lo stesso tipo di carattere e la stessa
combinazione di stili in tutte le pagine di un sito Web evitando cambiamenti casuali.
6.6
Risalto.
Risulta difficile analizzare la struttura del contenuto di una pagina Web composta da un corpo di
testo che non attira l'occhio.
A volte basta una piccola modifica per creare un contrasto visivo che attira l'occhio.
Esistono strumenti tipografici consolidati che permettono di dare risalto ad un blocco di testo, ma è
importante non utilizzarli in modo errato.
Infatti, se mettiamo tutto il testo in grassetto, niente risalterà e otterremo soltanto un effetto sgradito
alla maggior parte dei lettori.
‰ Corsivo - Il corsivo attira l'occhio perché è in contrasto con la forma del corpo del testo; va
utilizzato come convenzione o all'interno del testo per parole o frasi accentuate o straniere.
Poiché la leggibilità del testo in corsivo è inferiore rispetto al testo normale della stessa misure,
è preferibile non usarlo per lunghi blocchi di testo.
‰
Grassetto - Il testo in grassetto conferisce risalto essendo in contrasto con il colore del testo
normale.
Il grassetto è abbastanza leggibile su schermo, ma grossi blocchi di testo in grassetto mancano
di contrasto e si perde quindi il risalto.
‰
Sottolineato - Il testo sottolineato, risale ai tempi delle macchine da scrivere, quando il corsivo
e il grassetto non erano disponibili, e risulta troppo pesante interferendo con la forma delle
lettere.
10
Inoltre la sottolineatura nei documenti Web ha un significato speciale funzionale, infatti indica
un collegamento ipertestuale.
Quindi se usiamo testo sottolineato in una pagina Web, questa sarà sicuramente confuso con un
collegamento ipertestuale.
‰
Testo Colorato - Anche l'uso del colore, come la sottolineatura ha un significato funzionale
speciale nei documenti Web.
È sconsigliabile usare testo colorato all'interno del testo, perché i lettori penseranno che si tratta
di un collegamento ipertestuale.
Tuttavia il testo colorato funziona bene per dare risalto ai titoli di sezione e di paragrafo.
È buona norma scegliere colori scuri in contrasto con lo sfondo della pagina ma non utilizzare il
blu e il viola che sono i colori predefiniti dei collegamenti Web.
‰
Lettere maiuscole - Il testo in lettere maiuscole è uno dei metodi più comuni e meno efficaci
per aggiungere risalto tipografico.
L'occhio legge soprattutto riconoscendo la forma generale delle parole, non analizzando tutte le
lettere e riunendole in una parola riconoscibile.
Le parole o i titoli tutti maiuscoli formano rettangoli monotoni che non catturano l'occhio.
Per leggere un blocco di testo tutto maiuscolo è necessario leggere il testo lettera per lettera, il
che si traduce in una lettura scomoda e lenta.
È consigliabile anche evitare di utilizzare le lettere iniziali maiuscole in tutte le parole delle
intestazioni.
‰
6.7
Spaziatura e rientri - Uno dei modi più efficaci e sottili per variare il contrasto visivo e
l'importanza relativa di una porzione di testo consiste semplicemente nell'isolarla o trattarla in
modo diverso dal testo circostante.
Se desiderate evidenziare le intestazioni principali di una pagina senza ingrandirle, aggiungete
uno spazio sopra e sotto ogni intestazione per separarla dalle altre intestazioni e dal testo
successivo.
Anche i rientri rappresentano un altro modo efficace per distinguere porzioni di testo come gli
elenchi puntati, le citazioni o il testo di esempio.
Testo grafico.
Se si deve necessariamente usare un font ben preciso, non standard, si può creare il testo all'interno
di un'immagine GIF o JPEG.
Questa tecnica consente anche di applicare al testo ombreggiature ed altri effetti grafici.
Utilizzare testo grafico per titoli, sottotitoli o addirittura per interi blocchi di testo è fortemente
sconsigliabile perché, oltre ad allungare i tempi di caricamento delle pagine Web, il testo grafico
non può essere oggetto di ricerca e non viene indicizzato dai motori di ricerca.
Il testo grafico è indicato per creare loghi, intestazioni di pagina e immagini di navigazione.
11
7
7.1
Formati grafici
Il formato GIF.
Il formato GIF (Graphic Interchange Format) fu diffuso negli anni Ottanta come metodo efficiente
di trasmissione delle immagini su reti di dati.
All'inizio degli anni Novanta i progettisti originali del Web lo adottarono per l'efficienza che
offriva. Oggi la stragrande maggioranza delle immagini sul Web è in questo formato ed è
supportato da tutti i browser Web.
Il formato GIF usa una forma di compressione LZW che mantiene inalterata la qualità
dell'immagine, ovvero riduce le dimensioni del file senza pregiudicare la qualità grafica
dell'immagine.
La profondità dei colori delle immagini GIF è di 8 bit, che consente di usare una tavolozza di 256
colori. Meno colori si usano e maggiori saranno le possibilità di compressione, ovvero minori
saranno le dimensioni del file.
Lo schema di compressione LZW è più adatto a comprimere immagini con grossi campi di colore
omogeneo ed è meno efficiente nella compressione di immagini complicate con molti colori e grane
complesse.
È possibile sfruttare le caratteristiche della compressione LZW per migliorarne l'efficienza e ridurre
di conseguenza le dimensioni delle immagini GIF.
La strategia consiste nel ridurre il numero di colori in un'immagine GIF al numero minimo
necessario e nell'eliminare i colori isolati non necessari per la rappresentazione dell'immagine.
Un'immagine GIF non può avere più di 256 colori, ma può averne meno, fino a un minimo di due
(bianco e nero).
Le immagini con meno colori sono compresse più efficacemente con la compressione LZW.
Questa compressione consente anche di salvare le immagini in un formato interlacciato.
Il formato a interlaciamento produce una visualizzazione graduale di un'immagine in una serie di
passate sempre più definite a mano a mano che i dati arrivano al browser.
Ogni nuovo passo crea un'immagine più nitida fino al completamento dell'intera immagine.
Molti utenti trovano attraente l'effetto animato "da sfocato a nitido" dell'interlacciamento, ma il
vantaggio più importante di questa tecnica è che offre un'anteprima dell'intera area dell'immagine
mentre l'immagine viene scaricata sul browser.
L'interlacciamento è più adatto a immagini GIF di grandi dimensioni, quali le illustrazioni e le
fotografie, ma non rappresenta una buona scelta per immagini GIF di piccole dimensioni come le
barre di navigazione, i pulsanti e le icone che vengono caricate su schermo molto più rapidamente
se mantenute nel formato GIF tradizionale (non interlacciato).
In generale, l'interlacciamento non ha effetti significativi sulle dimensioni dei file d'immagine GIF.
Il formato GIF consente anche di scegliere nell'immagine un colore che risulterà trasparente nel
browser. Nelle aree di colore contrassegnato come trasparente, verrà visualizzato il colore di sfondo
della pagina.
Purtroppo la proprietà trasparente non è selettiva: se rendiamo trasparente un colore, ogni pixel
12
dell'immagine caratterizzato da tale colore diventerà a sua volta trasparente, e questo può produrre
risultati imprevisti.
L'aggiunta di trasparenza a un'immagine GIF può anche produrre risultanti deludenti quando
l'immagine contiene smussature o antialiasing.
Supponiamo di voler creare un pulsante di forma circolare di colore rosso da inserire sopra un
colore di sfondo usando Adobe Photoshop.
Photoshop smussa la forma circolare inserendo pixel di colori intermedi lungo i bordi della forma;
questa smussatura migliora l'aspetto delle immagini su schermo ammorbidendo i bordi frastagliati.
I problemi iniziano quando s'imposta il colore di sfondo a trasparente e si utilizza l'immagine in una
pagina Web su un altro colore di sfondo: il pixel soggetto ad antialiasing nell'immagine
corrisponderà sempre al colore di sfondo originale e quindi si vedrà un brutto alone attorno
all'immagine. Occorre allora prestare attenzione quando si usa la trasparenza nelle immagini GIF
per evitare il problema sopra descritto.
Il formato GIF consente di memorizzare in un unico file più immagini cui sono associate delle
informazioni di temporizzazione. Questo consente di costruire semplici animazioni costituite da più
immagini statiche che vengono presentate in successione creando l'illusione del movimento.
Si tratta esattamente della stessa tecnica utilizzata nell'animazione a fotogrammi.
Quando si crea un'animazione GIF, si può determinare il tempo che deve intercorrere fra la
visualizzazione di due immagini successive e il numero di volte che deve essere riprodotta
l'animazione.
Con un po' di immaginazione è possibile creare interessanti effetti di animazione come ad esempio
testo scorrevole, colori alternati, icone animate e piccole presentazioni.
Occorre non esagerare nell'uso di immagini GIF animate che rappresentano ad esempio icone
lampeggianti o messaggi scorrevoli. Molti potrebbero, infatti, trovare fastidioso questo effetto
ripetitivo, che può distrarre dal contenuto vero e proprio della pagina.
Si consideri se è il caso di ripetere l'animazione, solo, un determinato di numero di volte invece di
lasciare che l'animazione si ripeta all'infinito.
Se si vuole utilizzare un'animazione GIF come contenuto, si visualizzi l'animazione in una finestra
secondaria, in questo modo gli utenti potranno visualizzare l'animazione e quindi chiudere la
finestra.
Se invece, si presenta l'animazione sulla pagina principale di contenuto, questa interferirà con gli
altri elementi della pagina.
Per creare immagini GIF animate basta usare un software di animazione GIF.
Questi strumenti semplificano notevolmente l'impostazione della temporizzazione, della tavolozza
dei colori e degli effetti da applicare alle singole immagini.
13
7.2
Il formato JPEG.
Un formato grafico utilizzato di frequente sul Web per ridurre le dimensioni dei file grafici é lo
schema di compressione JPEG (Joint Photographic Expert Group).
A differenza delle immagini GIF, le immagini JPEG sono policrome (24 bit, o 16,8 milioni di
colori).
Questo tipo di immagini ha generato un altissimo interesse tra fotografi, artisti, progettisti grafici,
specialisti della composizione di immagini mediche, storici dell'arte e altri gruppi per i quali la
qualità dell'immagine è d'importanza fondamentale e per i quali non è possibile accettare
compromessi sulla fedeltà dei colori tramite retinatura di un'immagine a colori a 8 bit.
Una forma più recente di JPEG, chiamata JPEG progressivo, conferisce alle immagini JPEG la
stessa gradualità di visualizzazione delle immagini GIF interlacciate; al pari di queste ultime, le
immagini JPEG progressive impiegano spesso un tempo maggiore per lo scaricamento sulla pagina
rispetto ai JPEG standard, ma offrono al lettore un'anteprima più rapida.
La compressione JPEG utilizza una sofisticata tecnica matematica, chiamata trasformazione
discreta del coseno, per produrre una scala scorrevole di compressione delle immagini.
È possibile scegliere il grado di compressione che si desidera applicare a un'immagine in formato
JPEG, ma in questo modo si determina anche la qualità dell'immagine. Più si comprime
un'immagine con la compressione JPEG, più si riduce la qualità dell'immagine stessa.
JPEG può raggiungere rapporti di compressione incredibili, riducendo le immagini
centinaio di volte rispetto ai file originali; questo è possibile perché‚ l'algoritmo JPEG
non necessari durante la compressione dell'immagine e per questo motivo la
compressione è definita a perdita.
Sta al progettista quindi sperimentare l'impostazione più adatta per creare un file
accettabile.
di circa un
scarta i dati
tecnica di
dall'aspetto
Quando create immagini JPEG ricordate sempre di salvare una copia dell'immagine originale.
Infatti il formato JPEG degrada in modo permanente la qualità dell'immagine risultante.
Dopo aver convertito un'immagine in formato JPEG, non è più possibile recuperare la qualità
dell'immagine originale.
14
7.3
Il formato PNG.
Il formato PNG (Portable Network Graphies) è stato sviluppato appositamente per il Web.
Questo formato è stato disponibile fin dal 1995 ma ha stentato ad acquisire popolarità a causa della
mancanza di un supporto generalizzato da parte dei browser.
Si tratta di un formato che secondo le intenzioni degli autori doveva sostituire il formato GIF.
Questo formato senza perdita di informazioni comprime le immagini a 8 bit producendo file di
dimensioni inferiori rispetto a GIF.
Inoltre il formato PNG può essere utilizzato anche per la stampa delle immagini e pertanto supporta
immagini a colori a 8 bit, scale di grigio a 16 bit e colori True Color a 24 bit.
Anche se il formato PNG supporta il colore a 24 bit, la sua routine di compressione senza perdita di
informazioni non è in grado di raggiungere l'efficienza del formato JPEG.
Il formato PNG supporta le funzionalità di trasparenza e interallacciamento ma non l'animazione,
anche se il consorzio W3C ha creato una bozza per il formato MPG (Multiple-Image Network
Graphics) che supporta l'animazione.
Un'utile caratteristica del formato PNG è la capacità di incorporare del testo per offrire la possibilità
di eseguire ricerche sulle immagini; è infatti possibile memorizzare nel file dell'immagine una
stringa che identifica l'immagine stessa.
Purtroppo il formato grafico PNG non è ancora ampiamente supportato.
15
8
Ampiezza di banda di rete
A 28,8 kbps, ad esempio, il tasso di scaricamento effettivo è di circa 3,6 kilobyte (KB) al secondo
(un byte è formato da 8 bit): questo significa che una modesta immagine di 36 KB su una pagina
Web potrebbe impiegare più di dieci secondi per essere scaricata sul browser Web del lettore a
quella velocità.
I tassi di trasmissione dati effettivi variano a seconda del modem dell'utente, della velocità del
server Web, della connessione a Internet e da altri fattori, ma il quadro generale è chiaro: maggiore
è il numero di immagini incorporate, maggiore sarà il tempo necessario all'utente per visualizzare la
pagina.
Un menu grafico a schermo pieno su una home page, sommato a immagini di sfondo, potrebbe
lasciare i lettori che si collegano tramite modem a girarsi i pollici per un intero minuto, se non di
più, anche se dispongono di un modem avanzato e una buona connessione a Internet.
Una strategia migliore consiste nell'aumentare gradualmente lo scaricamento delle immagini delle
pagine, offrendo ai lettori tempi di scaricamento ragionevoli.
Man mano che i lettori cominciano a interessarsi al contenuto, saranno più disposti a sopportare
ritardi maggiori, soprattutto se informati delle dimensioni delle immagini o avvisati che determinate
pagine sono di immagini e quindi che sarà maggiore il tempo per lo scaricamento.
Alle velocità odierne dei modem di medio livello, la maggior parte delle pagine destinate agli utenti
che si collegano tramite connessione telefonica da casa non dovrebbe contenere più di 50/75
kilobyte di immagini.
Se si deve necessariamente usare un'immagine di grandi dimensioni, è opportuno presentare
all'utente una sua rappresentazione in miniatura e fornire indicazioni sulle dimensioni totali del file
contenente l'immagine intera.
16