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.

Esercizi

Base · facile

Correggi gli alt di queste immagini: la prima è informativa ma ha un alt inutile, la seconda è puramente decorativa.

<img src="grafico-vendite.webp" alt="immagine">
<img src="onda.svg" alt="onda decorativa azzurra in basso">

<img src="grafico-vendite.webp" alt="Grafico delle vendite mensili 2026">
<img src="onda.svg" alt="">

Intermedio · medio

Inserisci tre immagini: un logo informativo con alt descrittivo, una decorazione con alt="", e una card progetto con src, alt, width, height e loading="lazy". Spiega perché su queste tre width/height espliciti riducono i salti di layout.

Sfida · difficile

Una hero image a inizio pagina ha loading="lazy" e nessun width/height; tre immagini in fondo non hanno loading. Spiega perché entrambe le scelte sono sub-ottimali (la hero non va in lazy, le immagini in fondo sì) e riscrivi gli attributi corretti, motivando l’effetto su LCP e stabilità del layout.