Immagini: <img>, attributo alt obbligatorio, lazy loading

Il tag <img> inserisce un’immagine nel documento. È un elemento vuoto: non ha tag di chiusura e tutto ciò che serve viene dichiarato tramite attributi.

<img src="/immagini/profilo.webp" alt="Ritratto di Mario Rossi">

src

src indica il percorso del file immagine.

<img src="/immagini/logo.png" alt="Logo Codando">

Il percorso può essere relativo al sito o assoluto. Nei progetti semplici conviene tenere le immagini in una cartella chiara, per esempio immagini/ o assets/.

alt

alt contiene il testo alternativo. Serve quando l’immagine non viene caricata e, soprattutto, quando una persona usa uno screen reader.

Il testo alternativo deve sostituire la funzione dell’immagine.

<img src="dashboard.webp" alt="Schermata della dashboard con grafico vendite mensili">

Evita testi come:

<img src="dashboard.webp" alt="immagine">

Lo screen reader sa già che è un’immagine. Il valore utile è il significato.

Immagini decorative

Se l’immagine è solo decorativa e non aggiunge informazione, usa alt="".

<img src="onda-decorativa.svg" alt="">

In questo modo le tecnologie assistive possono ignorarla.

Dimensioni esplicite

Aggiungere width e height aiuta il browser a riservare spazio prima che l’immagine sia scaricata.

<img
  src="/immagini/logo.png"
  alt="Logo ufficiale"
  width="200"
  height="50"
>

Questo riduce i salti improvvisi del layout durante il caricamento.

loading="lazy"

loading="lazy" chiede al browser di rimandare il caricamento delle immagini lontane dalla parte visibile della pagina.

<img
  src="/immagini/progetto-3.webp"
  alt="Anteprima del progetto meteo"
  width="800"
  height="500"
  loading="lazy"
>

Non usarlo di norma sull’immagine principale visibile subito all’apertura della pagina, come una hero image importante. Usalo sulle immagini più in basso, per velocizzare il caricamento iniziale.

Esercizio

Inserisci tre immagini:

1. un logo informativo con alt descrittivo;
2. una decorazione con alt="";
3. una card progetto con width, height e loading="lazy".

Poi chiediti: se non vedessi le immagini, capiresti comunque la pagina?