Tag img

Il tag img crea un'immagine. Il percorso dell'immagine viene specificato nell'attributo src. Non richiede un tag di chiusura.

Attributi

Attributo	Descrizione
src	Specifica il percorso dell'immagine. Attributo obbligatorio.
alt	Testo alternativo che verrà mostrato al posto dell'immagine, se non viene trovata (ad esempio, se il percorso è specificato in modo errato). Attributo obbligatorio. In sua assenza, il validatore (il programma che verifica la correttezza dell'HTML o del CSS) segnalerà un errore.
width	Larghezza dell'immagine, in pixel (in questo caso non si specificano unità di misura) o in percentuale rispetto all'elemento genitore dell'immagine.
height	Altezza dell'immagine, in pixel (in questo caso non si specificano unità di misura) o in percentuale rispetto all'elemento genitore dell'immagine.

Sfumature

Se per un'immagine non sono specificate né la larghezza né l'altezza, l'immagine avrà le sue dimensioni reali. Se viene specificata l'altezza, l'immagine assumerà l'altezza specificata, mentre la larghezza si adatterà in modo che le sue proporzioni non vengano distorte.

Se viene specificata solo la larghezza, analogamente, l'immagine si adatterà in altezza in modo da mantenere le proporzioni.

Se vengono specificate sia la larghezza che l'altezza, le proporzioni dell'immagine potrebbero essere distorte (o forse no, se si indovina). Se la larghezza o l'altezza (o entrambe) sono maggiori di quelle reali, l'immagine verrà ingrandita, ma perderà in qualità.

Si consiglia di specificare la larghezza e l'altezza delle immagini negli attributi (e non tramite CSS) - in questo caso il browser caricherà le immagini più velocemente - non ha bisogno di calcolare la dimensione di ogni immagine dopo averla ricevuta.

Non è consigliabile ridurre le dimensioni reali dell'immagine senza necessità. Ad esempio, le dimensioni reali dell'immagine sono 1000 per 1000 pixel, ma le si imposta una larghezza di 100px. In questo caso l'immagine sullo schermo apparirà di 100 pixel, ma avrà le dimensioni di mille pixel e, di conseguenza, si caricherà molto più lentamente.

Esempio

Aggiungiamo un'immagine al sito e non specifichiamo gli attributi height e width. L'immagine avrà le sue dimensioni reali:

:

Esempio

Proviamo ad aggiungere all'immagine una larghezza tramite l'attributo width; l'altezza in questo caso dovrebbe adattarsi in modo da preservare le proporzioni dell'immagine:

:

Esempio

Ora aggiungiamo all'immagine un'altezza tramite l'attributo height; la larghezza in questo caso si adatterà in modo da preservare le proporzioni dell'immagine:

:

Esempio

Specifichiamo contemporaneamente sia l'altezza che la larghezza per l'immagine. Le proporzioni dell'immagine in questo caso dovrebbero risultare distorte (non necessariamente, ma in questo caso l'altezza e la larghezza sono scelte in modo che le proporzioni vengano distorte):

:

Esempio

Inseriamo un percorso errato per l'immagine (per semplicità lo lasciamo vuoto). Al posto dell'immagine vedremo il contenuto dell'attributo alt (sembra un testo normale - ma provate a copiarlo - non ci riuscirete, verrà trascinato come un'immagine):

:

Vedi anche