IL TAG <IMG> LA GRAFICA IN UNA PAGINA WEB

Transcript

1 Giorno dopo Giorno - Scritture quotidiane Un blog di Sergio Fumich Helps & Tools for the Web and Webmasters IL TAG <IMG> LA GRAFICA IN UNA PAGINA WEB

2 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

3 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

4 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. 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. 2.2 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

5 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,

6 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. 4.1 Tavolozza universale. Nome del colore Codice Esadecimale Nome del colore Codice Esadecimale Aqua 00FFFF Navy Black Olive Blue 0000FF Purple Fucsia FF00FF Red FF0000 Gray Silver C0C0C0 Lime 00FF00 White FFFFFF Maroon Yellow FFFF00 È 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

7 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 punti per pollice quadrato), ossia una risoluzione quasi 300 volte inferiore rispetto a quella di una tipica pagina di rivista ( 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

8 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

9 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

10 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

11 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. 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. 6.7 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

12 7 Formati grafici 7.1 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

13 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

14 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 di circa un centinaio di volte rispetto ai file originali; questo è possibile perché l'algoritmo JPEG scarta i dati non necessari durante la compressione dell'immagine e per questo motivo la tecnica di compressione è definita a perdita. Sta al progettista quindi sperimentare l'impostazione più adatta per creare un file dall'aspetto accettabile. 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

15 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

16 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