logo

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.

fumetto

 

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:

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):

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.

compressione

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:

 

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:

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.



Ritorna ad inizio pagina testo e grafica di Francesco Battistelli Ritorna all'indice