Il tag img di HTML è utilizzato per includere immagini all’interno di una pagina web. Questo tag necessita di due attributi obbligatori: src e alt.
La sintassi di <img>
La sintassi di base del tag <img>, pertanto, è la seguente:
<img src="..." alt="...">Il tag <img> non prevede alcun tag di chiusura, in XHTML, pertanto, deve essere chiuso in questo modo:
<img ... />L’attributo src
L’attributo src è, senza dubbio, il più importante: il suo nome è una contrazione del termine anglosassone "source" (sorgente). Mediante questo attributo viene specificato il nome ed il percorso in cui si trova l’immagine da inserire nel documento. E’ evidente che per essere inclusa in una pagina web l’immagine deve essere disponibile in Rete, quindi deve essere caricata all’interno di uno spazio web.
Volendo fare un esempio supponiamo di avere tutte le immagini del nostro sito all’interno di una cartella <immagini" posizionata nella root del nostro spazio web. In questo caso avremmo potuto utilizzare il tag <img> in questo modo:
<img src="/immagini/foto.jpg">In alternativa avremmo potuto inserire il percorso assoluto dell’immagine in questo modo:
<img src="http://www.miosito.com/immagini/foto.jpg">In entrambi i casi la pagina web includerà l’immagine mediante il suo collegamento, creando uno spazio di rappresentazione attraverso il quale verrà mostrato l’output dell’immagine nelle dimensioni naturali o in base a quelle impostate dallo sviluppaore web mediante gli attributi di dimensionamento – width e height – o attraverso i fogli di stile.
L’attributo alt
Oltre a src le specifiche dell’HTML considerano indispensabile anche l’attributo alt il quale è utilizzato per inserire il cosiddetto testo alternativo per l’immagine. Si tratta di una descrizione testuale dell’immagine necessaria al fine di garantire la piena accessibilità del documento agli agli utenti con handicap visivi.
Vediamo un esempio:
<img
src="/foto-mare/tramonto-alassio.jpg"
alt="Foto di un tramonto nella spiaggia di Alassio, Liguria"
>In merito all’utilità dell’attributo alt ed al modo corretto in cui utilizzarlo si faccia riferimento a questo articolo di approfondimento.
Tutti gli attributi del tag <img>
| Attribute | Value | Description |
|---|---|---|
| alt | testo | E’ utilizzato per specificare un testo alternativo. |
| crossorigin | anonymous use-credentials | Consente di utilizzare immagini di terze parti all’interno di un tag <canvas>. |
| height | pixel | Specifica l’altezza dell’immagine. |
| ismap | ismap | E’ utilizzato per indicare che l’immagine è collegata ad una mappa di tipo server-side (quando l’utente clicca sulla mappa le coordinate del click sono trasmesse al server). |
| longdesc | URL | Specifica una URL che fornisce maggiori informazioni sull’immagine (è stato concepito come un modo per approfondire le informazioni passate mediante l’attributo alt). |
| sizes | E’ utilizzato per specificare differenti formati da utilizzare a seconda dei differenti layout di pagina. | |
| src | URL | Specifica il percorso in cui si trova il file dell’immagine. |
| srcset | URL | E’ utilizzato per specificare le URL di differenti file da utilizzare per il medesimo tag <img> a seconda della risoluzione dello schermo. |
| usemap | #mapname | E’ utilizzato per specificare che collegare l’immagine alò markup una mappa HTML. |
| width | pixel | Specifica la larghezza dell’immagine. |
Con HTML5 alcuni attributi storici (align, border, hspace e vspace) del tag <img> non sono più supportati a favore della stilizzazione degli elementi mediante CSS.
Esempi di utilizzo del tag <img>
Abbiamo già visto come utilizzare i fondamentali tag src e alt. Vediamo di seguito alcuni esempi di utilizzo degli altri attributi del tag.
Specificare altezza e larghezza (width – height)
<img src="foto.jpg"
alt="Esempio di fotografia"
width="700"
height="400">Specificare una longdesc
<img src="foto-tramonto.jpg"
alt="Tramonto ad Alassio"
longdesc="/tramonto-di-alassio.html">Creare immagini reattive (srcset – sizes)
<img srcset="foto-320w.jpg 320w,
foto-480w.jpg 480w,
foto-800w.jpg 800w"
sizes="(max-width: 320px) 280px,
(max-width: 480px) 440px,
800px"
src="foto-800w.jpg"
alt="Esempio di foto responsiva">Nel codice di esempio ho utilizzato gli attributi srcset e sizes per creare un’immagine responsiva che sia adatta, cioè, alla risoluzione dello schermo fornendo ogni volta la miglior immagine in termini di qualità/prestazioni.
Creare una mappa server-side (ismap)
<a href="/mio-script.php">
<img src="mappa-italia.gif" alt="Mappa dinamica" ismap>
</a>Come detto, con il codice proposto, le coordinate del click dell’utente saranno trasmesse allo script.
Creare una mappa HTML (usemap)
<img src="continenti.png" width="600" height="277" alt="I continenti" usemap="#continenti">
<map name="continenti">
<area shape="circle" coords="70,70,10" href="https://it.wikipedia.org/wiki/America_del_Nord" target="_blank">
<area shape="circle" coords="133,185,10" href="https://it.wikipedia.org/wiki/America_meridionale" target="_blank">
<area shape="circle" coords="270,137,10" href="https://it.wikipedia.org/wiki/Africa" target="_blank">
<area shape="circle" coords="292,44,10" href="https://it.wikipedia.org/wiki/Europa" target="_blank">
<area shape="circle" coords="469,201,10" href="https://it.wikipedia.org/wiki/Oceania" target="_blank">
<area shape="circle" coords="374,65,10" href="https://it.wikipedia.org/wiki/Asia" target="_blank">
<area shape="circle" coords="340,267,10" href="https://it.wikipedia.org/wiki/Antartide" target="_blank">
</map>