Il tag <img>: src, alt, width, height, attributi obbligatori

Il tag <img> scritto solo con src funziona: l'immagine appare. Ma tre attributi in più fanno la differenza tra una pagina accessibile e veloce, e una che «salta» mentre carica e resta muta per chi non vede lo schermo.

1. alt: significativo, o intenzionalmente vuoto

L'attributo alt è obbligatorio per specifica, non è un optional. Ma «obbligatorio» non significa «sempre descrittivo»: per un'immagine decorativa (un fregio, uno sfondo puramente estetico), il valore corretto è una stringa vuota, alt="", non l'omissione dell'attributo.

<img src="grafico-vendite.png" alt="Vendite in crescita del 20% nel terzo trimestre">

<img src="fregio-decorativo.svg" alt="">

Il motivo tecnico della differenza: se alt manca del tutto, molti screen reader leggono il nome del file al suo posto, un rumore inutile come «DSC underscore 0042 punto jpeg». Con alt="", invece, l'immagine viene saltata volutamente.

Il test pratico per un alt significativo, suggerito da MDN: leggilo insieme al testo che lo precede. Se il risultato suona strano o ridondante, va riscritto. Un'ultima nota: non duplicare mai lo stesso testo in alt e in title sulla stessa immagine, alcuni screen reader lo leggerebbero due volte.

Fonte: MDN Web Docs, «<img>»: alt vuoto segnala un'immagine decorativa che può essere omessa dal rendering non visivo; evitare di duplicare alt in title sulla stessa immagine.

2. width e height: riservare lo spazio prima che l'immagine arrivi

Senza width e height, il browser non sa quanto spazio riservare prima di scaricare l'immagine: la riserva è 0x0 finché l'immagine non arriva, e poi tutto il contenuto sottostante si sposta di colpo. Questo fenomeno ha una metrica precisa nelle performance web: il Cumulative Layout Shift (CLS).

<img src="foto-prodotto.jpg" alt="Scarpa da corsa blu" width="800" height="600">

Dichiarare width/height è raccomandato per tutte le immagini, ma diventa particolarmente importante per quelle con caricamento differito, vedi il punto successivo.

Fonte: MDN Web Docs, «<img>»: width e height espliciti sono raccomandati per tutte le immagini per evitare layout shift, e sono particolarmente importanti per le immagini a caricamento lazy.

3. loading="lazy": caricare solo quando serve davvero

loading="lazy" dice al browser di rimandare il download di un'immagine finché non si avvicina alla parte visibile dello schermo: utile per immagini più in basso nella pagina, che chi naviga potrebbe non arrivare mai a vedere.

<img src="foto-in-fondo-pagina.jpg" alt="Team al lavoro" loading="lazy" width="1200" height="800">

Qui width/height contano ancora di più: MDN spiega che un'immagine con caricamento lazy non viene mai scaricata se non interseca una parte visibile della pagina, ma finché resta senza dimensioni dichiarate, il suo spazio riservato è zero, e questo può impedire proprio a quell'intersezione di verificarsi correttamente.

Un avvertimento importante, da web.dev (Google): non usare loading="lazy" per immagini che compaiono subito visibili al caricamento della pagina, specialmente l'immagine più importante sopra la piega (il Largest Contentful Paint). Ritardarla peggiora, non migliora, la percezione di velocità.

Fonte: web.dev (Google), «Browser-level image lazy loading»: raccomanda di evitare loading="lazy" su immagini probabilmente visibili al caricamento, specialmente quelle che determinano il Largest Contentful Paint.

In sintesi

Quattro attributi, quattro pubblici diversi: src per il browser, alt per chi non vede l'immagine, width/height per la stabilità visiva di tutti, loading per chi ha una connessione lenta. Nessuno di loro è opzionale in un progetto curato.