6° puntata Le immagini bitmap I formati grafici GIF e JPEG Come inserire le immagini
	Ritorna all'indice

Visitando un museo che contenga reperti romani o bizantini è facile imbattersi nei mosaici, quelle composizioni artistiche formate da piccole tessere, ciascuna di un colore diverso, che poste l'una accanto all'altra ricreano l'immagine desiderata. Le immagini rappresentate sullo schermo del computer sono costituite da una serie di punti luminosi, che corrispondono alle tessere di un mosaico; questi punti sono detti pixel (il nome deriva dalla contrazione di picture-element, elemento d'immagine) ed ognuno di essi ha un colore definito dal valore corrispondente memorizzato nel file grafico.

Le immagini bitmap

Le immagini bitmap (a mappatura di bit) sono rappresentate da un insieme di punti, a ciascuno dei quali corrisponde in memoria uno o più bit:

• in una puntata precedente abbiamo visto che per le immagini a colori il modello RGB richiede 24 bit, cioè 3 byte per ogni pixel;
• le immagini in bianco e nero in scala di grigio permettono di attribuire ad ogni pixel 256 toni diversi, informazione che occupa 8 bit, ovvero 1 byte;
• infine nelle immagini a due colori (bianco e nero, senza sfumature) l'informazione relativa al colore di un pixel occupa soltanto 1 bit.
  

Dato che il numero di pixel di un'immagine bitmap è fisso, se visualizziamo un'immagine ingrandita si nota una perdita di qualità (cosa che non accade per le immagini vettoriali, che non sono definite punto per punto ma in base alla forma delle linee e alle coordinate dei punti notevoli). Nell'esempio sottostante vediamo cosa succede se ingrandiamo l'immagine bitmap di Gioacchino Rossini, moltiplicando ogni volta il lato del quadrato per quattro (nel secondo caso per motivi di spazio mostriamo solo l'ingrandimento del quadrato bianco):

Tocchiamo ora un punto molto importante: la risoluzione (o definizione) di un'immagine è il numero di punti contenuti in un pollice (un pollice, in inglese inch, corrisponde a 2,54 cm): più la risoluzione è alta, più la foto è nitida, più il file che ne contiene i dati risulta pesante.
Di solito nel Web la nitidezza passa in secondo piano rispetto alla leggerezza, dato che file pesanti equivalgono a tempi di caricamento più lunghi e quindi a costi di collegamento superiore. Inoltre è importante sapere che lo schermo non è in grado di visualizzare risoluzioni più alte di 72 punti per pollice (in alcuni sistemi si arriva sui 90), mentre il minimo per una stampa decente è una risoluzione di 300 dpi (dots per inches, ovvero punti per pollice).

Vediamo quale è il rapporto tra risoluzione e dimensione di un immagine con un esempio:
Supponiamo di avere una fotografia quadrata con il lato di due pollici (poco più di 5 cm) e di volerla acquisire con uno scanner; vediamo che cosa accade se salviamo l'immagine risultante in formato bitmap (BMP) in scala di grigio e a colori con tre diverse risoluzioni (100, 300 e 600 dpi):

• se scegliamo la risoluzione 100, il lato di 2 pollici equivale a 200 pixel e l'immagine risulta un quadrato composto da 40.000 pixel (200x200); acquisendo l'immagine in scala di grigio (1 byte per pixel) il peso dell'immagine è 40 kB, a colori (3 byte per pixel) sale a circa 120 kB.
• se scegliamo la risoluzione 300, il lato equivale a 600 pixel e l'immagine è un quadrato composto da 360.000 pixel (600x600); acquisendo in scala di grigio il peso è circa 360 kB, a colori è oltre 1 MB.
• se scegliamo la risoluzione 600, il lato equivale a 1.200 pixel e l'immagine è un quadrato composto da 1.440.000 pixel (1.200x1.200); acquisendo in scala di grigio il peso raggiunge 1,4 MB, a colori supera i 4 MB!

Quindi pur senza variare la dimensione dell'immagine, che resta 2 pollici per 2 pollici, otteniamo immagini di peso notevolmente diverso, senza alcun vantaggio dall'uso di una risoluzione superiore, dato che come abbiamo detto lo schermo non ha faretti sufficienti neppure per raggiungere la risoluzione 100: il discorso cambia se vogliamo stampare la pagina, e in questo caso si nota decisamente la differenza tra le immagini con diversa risoluzione.

Ridurre il peso con la compressione Abbiamo detto che le immagini in formato BMP contengono la sequenza dei colori di tutti pixel, elencati in ordine uno per uno; è però possibile comprimere i dati in modo tale che il file grafico occupi meno spazio: la compressione, che consiste in un algoritmo matematico, può essere di due tipi: la compressione senza perdita di dati (in inglese lossless) permette di risparmiare memoria senza perdere informazioni, e il file decompresso è identico all'originale. la compressione con perdita di dati (lossy) permette una maggiore riduzione a scapito della qualità: dato che elimina le informazioni visuali ritenute non indispensabili, il file decompresso non sarà mai uguale all'originale.

I formati grafici GIF e JPEG

Poiché il formato BMP è praticamente inutilizzabile per la sua pesantezza, i formati grafici utilizzati nel Web sono principalmente due:

• Il formato GIF (Graphics Interchange Format), che come dice il nome è nato per la distribuzione dei file grafici su sistemi diversi, utilizza soltanto 256 colori. Dopo aver costruito una mappa dei colori utilizzati, il colore di ogni pixel è un numero che fa riferimento a quella mappa (ne deriva che bastano 8 bit per ogni pixel, in luogo dei 24 bit di un'immagine BMP).
  Inoltre viene utilizzata una compressione di tipo lossless che va a ricercare le sequenze di pixel dello stesso colore: maggiori sono le aree di colore uniforme, più alta è la compressione e il risparmio di spazio. Da ciò deriva che il formato GIF è ideale per immagini con pochi colori senza sfumature (ad esempio icone, pulsanti, clip-art e fotografie in bianco e nero). I file con questo formato hanno l'estensione .gif
  E' possibile generare file GIF trasparenti, interallacciati (si caricano con una specie di dissolvenza) o animati (costituiti da una serie di immagini che si ripetono per un numero di volte predefinito, danno l'effetto di un'animazione), anche se qui entriamo nel campo dell'elaborazione delle immagini per la quale esistono apposite applicazioni (ad esempio Adobe Photoshop e Corel Draw).

• Il formato JPEG (Joint Photograph Experts Group) è un formato creato da un team di esperti in immagini fotografiche e consiste in un algoritmo di compressione lossy, con conseguente perdita di dati, che misura le differenze di colore tra gruppi di pixel vicini ed effettua piccole variazioni di colore o luminosità non distinguibili dall'occhio umano. Il livello di compressione può essere regolato ed è possibile ridurre il peso di un'immagine da 1 Mb a 50 Kb, anche se spesso è bene non abusare della compressione massima.
  Dato che JPEG comprime molto bene le immagini contenenti sfumature e variazioni di colore, è il formato ideale per le fotografie a colori. Le estensioni dei file con questo formato sono .jpeg e .jpg

Come inserire le immagini

Per caricare un'immagine sulla nostra pagina HTML è sufficiente utilizzare il tag IMG e dare all'attributo SRC il nome del file dell'immagine richiesta (se dobbiamo indicare il percorso o l'indirizzo URL valgono le cose dette per i link). Quindi per inserire l'immagine pippo.gif contenuta nella cartella Immagini scriveremo il seguente codice:

<img src="Immagini/pippo.gif">

L'immagine viene inserita nel punto in cui è presente il tag IMG e viene affiancata agli altri elementi della pagina, in modo che il margine inferiore dell'immagine corrisponda alla base del testo circostante. E' possibile cambiare la posizione relativa del testo con l'attributo ALIGN.

Per fare in modo che la nostra immagine divenga un collegamento ipertestuale basta inserirla all'interno di un tag A: <a><img src="../Immagini/pippo.gif"></a>
In questo caso il browser circonda l'immagine con un bordo azzurro che corrisponde alla sottolineatura dei link testuali: per eliminare questo bordo basta aggiungere a IMG l'attributo border="0".

Oltre a SRC i principali attributi di IMG sono:

• ALIGN, che definisce l'allineamento verticale del testo che affianca l'immagine (top, middle, bottom), oppure permette di allineare l'immagine a sinistra o a destra circondandola con tutto il testo (left, right);
• ALT, che indica il testo alternativo da visualizzare se il browser non riesce a caricare l'immagine;
• BORDER, che dà la dimensione in pixel del bordo dell'immagine;
• HEIGHT e WIDTH, ovvero le dimensioni in pixel dell'immagine; di solito è utile dichiararle perché il browser, che non aspetta di completare il caricamento dell'immagine per leggere il resto del codice HTML, può già lasciare lo spazio necessario all'immagine impaginando correttamente gli elementi seguenti. Se vengono indicati valori diversi dagli originali l'immagine risulta deformata, ma di solito conviene evitare ingrandimenti o rimpicciolimenti ed effettuare le variazioni con un programma di grafica prima di caricare l'immagine.

HTML dà anche la possibilità di caricare un'immagine sullo sfondo della pagina, ripetendola più volte se è di dimensioni inferiori alla finestra, utilizzando l'attributo BACKGROUND del tag BODY:
<body background="pippo.gif">

E' infine possibile effettuare il collegamento ad un'immagine esterna che abbia un qualunque formato grafico, creando un link come se conducesse ad un'altra pagina:
<a href="pippo.gif>Visualizza l'immagine</a>
Selezionando il collegamento l'immagine viene visualizzata nella finestra come se fosse una nuova pagina e spesso il link parte da un'immagine più piccola e leggera, in modo tale che si possa scegliere se caricare quella più pesante.

Vediamo ora come i nostri browser leggono il codice sottostante:

<html>
<head>
<title>HTML 6 - Le immagini</title>
</head>
<body background="Immagini/sfondoGrigio.gif">
<img src="Immagini/deserto.gif"> <img src="Immagini/deserto.gif" width="67" height="39"><br>
<br>
Link:
<a href="calcio.htm"><img src="Immagini/calcio.gif"></a>
<a href="calcio.htm"><img src="Immagini/calcio.gif" border="0"></a><br>
<br>
Testo con <img src="Immagini/titti.gif"> un'immagine<br>
<br>
<img src="Immagini/titti.gif" align="left">In questo caso l'immagine è allineata a sinistra e il testo adiacente si dispone su più righe (è possibile anche allineare l'immagine a sinistra)
</body>
</html>

quello che visualizza Internet Explorer (versione 5.0)	quello che visualizza Netscape Navigator (versione 4.06)

Dato che è stata utilizzata una GIF animata, potete vedere questa pagina di esempio anche con il vostro browser (per tornare indietro usate il tasto BACK o INDIETRO del browser).

Una raccomandazione finale...

Abbiamo visto che è possibile abbellire la nostra pagina con le immagini, ma è necessario ricordarsi che le pagine con grafica, pur essendo più belle da vedere, sono più lente da caricare. Quindi dobbiamo scegliere le immagini con cura, scartando quelle superflue o troppo pesanti e cercando di evitare effetti da "pugno in un occhio": sfondi troppo sgargianti che disturbano la lettura dei testi, immagini da luna park, pulsanti e bottoni così attraenti che distolgono l'attenzione da cose più importanti, e così via.
E' ovvio che il buon gusto è personale, però è possibile prendere quegli accorgimenti che aiutino chi dovrà attendere il caricamento delle vostre pagine. Un consiglio sempre valido è quello di usare le immagini più leggere possibile (cercando di non superare i 10 kB), riutilizzando le stesse immagini nelle diverse pagine in modo che il browser le abbia già precaricate in memoria.

La prossima puntata parleremo di tabelle.