Le immagini possono essere uilizzate in diverse maniere per migliorare l'aspetto di una pagine Web, ad esempio come sfondi, linee orizzontali, oppure come disegni o elementi grafici. Con le immagini possono essere impiegate per chiarire un punto del testo oppure come collegamenti ad altre pagine Web. Possono essere anche simboli direzionali che consentono al visitatore di navigare attraverso il sito. Tre tipi possono essere utilizzati per le immagini: JPEG, GIF e PNG. Un file jpeg rappresenta un'immagine grafica che viene salvata utilizzando tecniche di compressione per ridurne le dimensioni in modo da facilitare il trasferimento nel Web. I file jpeg sono utilizzati per le fotografie perchè supportano milioni di colori. Generalmente sono immagini più complesse. Le immagini gif anche queste sono salvate con tecniche di compressione ma supportano meno colori. E' adatte alle immagini con pochi colori. Generalmente è consigliato usare il formato jpeg per immagini con più di 20 colori. Il formato png è una via di mezzo tra gif e jpeg ed è meno usato.

<IMG>

Il tag <IMG> serve per inserire un'immagine e non ha bisogno di chiusura e la sua corretta sintassi è la seguente:

<IMG SRC="immagine.gif">

Dove SRC sta per Search ed è il percorso dal quale il browser ricava l'immagine (in questo caso "immagine.gif"). Come detto si tratta di un tag singolo, nel senso che NON va chiuso con un corrispondente </IMG>.

I browser (Netscape, MsIe, Opera ecc.) riconoscono molti formati grafici, anche se sono due quelli più utilizzati: GIF (Graphics Interchange Format) e JPEG (Joint Photographics Experts Group). Negli ultimi mesi sta diffondendosi su scala mondiale un altro formato: PNG (Portable Network Graphics).
L'elemento <IMG> è corredato da diversi attributi molto utili ai fini del suo utilizzo. Vediamo insieme quali.

ALT

L'utilizzo di commenti testuali alle immagini è una fondamentale regola da osservare nella creazione di siti Web per alcune buone ragioni:

taluni browser potrebbero essere impostati per non richiamare le immagini;

i browser testuali per non vedenti non riuscirebbero ad interpretare le immagini senza un commento.

è possibile evitare didascalie inserendo commenti all'interno dell'immagine stessa. In tutti i casi considerati l'uso di commenti risolve il problema e consente di ottimizzare l'ulitizzo di una pagina Web. La corretta sintassi per i commenti è la seguente:

<IMG SRC="immagine.gif" ALT="Opera di K. Haring">

WIDTH e HEIGHT

Negli esempi finora indicati non abbiamo specificato le misure dell'immagine che il browser ha provveduto a cercare automaticamente. E' possibile definire altezza e larghezza dell'immagine con gli attributi width ed height:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 ALT="Opera di K. Haring">

Dove WIDTH=178 è la dimensione orizzontale (larghezza) dell'immagine espressa in pixel, e HEIGHT=180 la dimensione verticale (altezza).

Con questi attributi è possibile definire dimensioni differenti da quelle effettive dell'immagine. E', comunque, consigliabile inserire immagini di dimensioni naturali soprattutto se in formato GIF, visto che ridimensionando questo formato la qualità decade enormemente.

BORDER

Con l'attributo BORDER è possibile assegnare un bordo all'immagine. I valori sono numerici ed espressi in pixel. Il valore BORDER impostato su 0 ha l'effetto di non visualizzare alcun bordo. Se questo attributo viene omesso il browser non assegna nessun bordo, ma se l'immagine è anche un link viene automaticamente assegnato un BORDER=1. Questa che segue è la giusta sintassi:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 ALT="Opera di K. Haring">

HSPACE e VSPACE

Con questi due attributi è possibile stabilire la distanza in pixel dell'immagine dagli oggetti che si trovano ai quattro lati della stessa.

HSPACE definisce la distanza dai lati destro e sinistro dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.).

VSPACE definsice la distanza dai lati superiore e inferiore dell'immagine degli oggetti più vicini (testo, immagini, applet ecc.). Questa la corretta sintassi:

<IMG SRC="immagine.gif" WIDTH=178 HEIGHT=180 BORDER=2 VSPACE=3 HSPACE=3 ALT="Opera di K. Haring">

Questi attributi risultano utili quando si vuole distanziare l'immagine dagli oggetti più vicini.

ALIGN

L'attributo ALIGN definisce la posizione dell'immagine rispetto al testo posto immediatamente prima o dopo la stessa. Esistono varie opzioni per l'attributo ALIGN:

ALIGN=top: allinea la prima riga di testo sulla sinistra al top dell'immagine.

ALIGN=middle: allinea la prima riga di testo sulla sinistra al centro dell'immagine.

ALIGN=bottom: allinea la prima riga di testo sulla sinistra nella parte più bassa dell'immagine.

ALIGN=left: allinea il testo sulla destra dell'immagine partendo dal top.

ALIGN=right: allinea il testo sulla sinistra dell'immagine partendo dal top.