Immagini

I formati per il web

La prima versione di HTML non prevedeva l'inserimento di immagini nei documenti, ma con l'avventarsi della grande massa sulla rete, le esigenze commerciali cambiarono le cose. Ora HTML supporta tre formati grafici che svolgono egregiamente il loro compito:

- Il formato GIF - formato piuttosto leggero, l'unico con il grande pregio di supportare l'animazione, ottenuta "impacchettando" diversi file in uno solo. Altro grande pregio e' la possibilita' di impostare la trasparenza. Supporta al massimo 256 colori.

- Il formato PNG - fino a non molto tempo fa alcuni browser non ne offrivano il supporto, ostacolo che sembra ora superato. Come per tutti gli altri formati lo "spazio" che occupa e' influenzato da diversi fattori, ma se mantenuto basso il numero di colori risulta spesso piu' leggero del GIF. Anche PNG puo' supportare la trasparenza.

- JPG o JPEG - Questo formato compresso e' particolarmente indicato per immagini complesse come possono essere i paesaggi e le riproduzioni con soggetti umani restiuendone spesso, soprattutto a parita' di spazio su disco, dettaglio e sfumature in modo piu' realistico di GIF e PNG.

334 bytes 253 bytes 1.056 bytes

rgb.gif
rgb.png
rgb.jpg

Se osservate attentamente, le tre immagini sopra non mostrano alcuna differenza in qualita'. Cio che fa la differenza e' il peso in bytes, ed e' il formato JPG a pagarne lo scotto. Se ne deduce che con immagini semplici e povere di sfumature e' conveniente usare GIF e PNG.

256 colori 13.966 bytes 256 colori 12.837 bytes colore RGB 2.411 bytes

mont.gif
mont.png
mont.jpg

Contrariamente all'esempio visto in precedenza e' il formato JPG ad ottenere il miglior rapporto qualita'/ingombro, questo perche' le immagini ricche di sfumature sono gestite al meglio dall'algoritmo di compressione di JPG. Ma nonostante tutte le considerazioni finora prese in esame, la regola migliore resta quella di provare la conversione dell'immagine nei vari formati ed operare la scelta piu' conveniente.

Gestire il tag IMG

Passiamo ora alla gestione del tag che ci permette di inserire le immagini nel documento. Eccolo nella sua forma piu' semplice. Si noti che deve essere specificata l'estensione del file, in questo caso di tipo .gif.

<IMG SRC=immagine.gif>

<IMG SRC=sfondo_trasparente.gif>

Osservare che la seconda immagine gif mostra lo sfondo trasparente. Purtroppo questa opzione non e' direttamente fruibile da HTML, ma occorrera' un apposito editor per grafica che permetta di selezionare un colore da impostare in trasparenza.

Gli attributi HSPACE e VSPACE

L'attributo HSPACE permette di distanziare l'immagine in senso orizzontale di 50 pixel su ogni lato dagli oggetti vicini (in questo caso i bordi della tabella).

 <IMG SRC=immagine.jpg VSPACE=50>

L'attributo VSPACE invece imposta lo spazio vuoto in senso verticale. HSPACE e VSPACE possono essere usati anche contemporaneamente, creando cosi' uno spazio vuoto di 50 pixel sia in altezza che in larghezza.

Breve parentesi: l'immagine nella tabella

A questo punto cogliamo l'occasione per imparare come inserire un'immagine in una tabella.


<TABLE BORDER=1>
<TR>
<TD>
<IMG SRC=img/cless.gif>
</TD>
</TR>
</TABLE>

Un'immagine puo' anche essere impostata come sfondo di una tabella.


<TABLE BORDER=1 WIDTH=150 HEIGHT=100>
<TR>
<TD BACKGROUND=img/cless.gif>
&nbsp;
</TD>
</TR>
</TABLE>

Se pero' non si introduce nient'altro nella tabella diventa indispensabile specificare altezza e larghezza di quest'ultima. Avremmo ottenuto un risultato simile inserendo il codice necessario nel tag <TABLE> in questo modo:
<TABLE BORDER=1 WIDTH=150 HEIGHT=100 BACKGROUND=img/cless.gif>.

Altezza e larghezza

I browser gestiscono automaticamente le dimensioni delle immagini assegnando loro le misure reali. Tramite gli elementi HEIGHT e WIDTH possiamo pero' scavalcare le impostazioni di default e definire le misure che preferiamo.

( Dimensioni reali 32x32 pixel )


<IMG SRC=img/chip.gif>


<IMG SRC=img/chip.gif HEIGHT=64 WIDTH=64>

ALT

immagine reale.gif

<IMG SRC=img/alt.gif ALT="immagine reale.gif">

Questo attributo svolge due funzioni. Possiamo verificare la prima posizionando il cursore del mouse sull'immagine qui sopra: apparira' la stringa di testo affidata all'attributo in questione (vedi codice).

La seconda possiamo verificarla nell'esempio sotto, richiamando un file inesistente. Il browser visualizzera' il testo da noi impostato al posto dell'ipotetica immagine mancante.


<IMG SRC=file_not_found.gif ALT="immagine mancante.gif">

Il bordo

Attributo scarsamente utilizzato, permette di circondare con un bordo l'immagine interessata.

L'allineamento

In questo paragrafo esamineremo solo i principali attributi che regolano la posizione di un'immagine in relazione agli altri contenuti, in quanto solo pochi di essi sono universalmente accettati dai vari browser in circolazione.

Il primo esempio mostra l'impostazione di default, ossia il solo tag per inserire l'immagine.

testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova testo di prova


<IMG SRC=img/desk.gif>

Ora con allineamento a sinistra. E' evidente il fatto che il testo cominci a scorrere dal margine superiore dell'immagine.


<IMG SRC=img/desk.gif ALIGN=left>

Allineamento al centro:


<IMG SRC=img/desk.gif ALIGN=center>

Ed ora con allineamento a destra.


<IMG SRC=img/desk.gif ALIGN=right>

Prossimo capitolo