Immagini

Inserire un’immagine

L’elemento vuoto <img> mostra un’immagine. I suoi due attributi fondamentali sono src e alt:

<img src="immagini/pane.jpg" alt="Tre pagnotte su un tavolo di legno" />

src, abbreviazione di source, indica dove si trova il file. alt, abbreviazione di alternative text, comunica in forma testuale ciò che l’immagine aggiunge alla pagina. Può essere mostrato se il file non si carica e letto da un lettore di schermo.

Scrivere un testo alternativo utile

Il testo alt dipende dallo scopo dell’immagine, non soltanto da ciò che contiene. Prima di scriverlo chiediti quale informazione perderebbe chi non vede l’immagine.

Se la fotografia presenta un prodotto, descrivi l’informazione importante:

<img src="focaccia.jpg" alt="Focaccia rotonda con pomodorini e olive" />

Evita formule come “immagine di”: il lettore di schermo annuncia già che si tratta di un’immagine.

Se l’immagine è puramente decorativa e non aggiunge informazioni, usa un attributo vuoto:

<img src="decorazione-grano.svg" alt="" />

Non omettere alt. Un attributo vuoto comunica intenzionalmente che l’immagine può essere ignorata; un attributo assente può far leggere il nome del file.

Indicare le dimensioni

Gli attributi width e height dichiarano le dimensioni originali in pixel:

<img src="immagini/pane.jpg" alt="Tre pagnotte su un tavolo di legno" width="800" height="533" />

Queste informazioni permettono al browser di riservare lo spazio prima che il file sia caricato, riducendo gli spostamenti improvvisi del contenuto. Non obbligano l’immagine a restare sempre di quelle dimensioni: per adattarla a schermi diversi userai CSS.

Immagine con didascalia

Quando immagine e didascalia formano un’unica unità, usa <figure> e <figcaption>:

<figure>
  <img
    src="immagini/forno.jpg"
    alt="Il fornaio inserisce il pane nel forno"
    width="800"
    height="533"
  />
  <figcaption>La prima infornata viene preparata alle 5 del mattino.</figcaption>
</figure>

La didascalia è visibile a tutti e può aggiungere contesto. Non deve per forza ripetere il testo alternativo.

Formato e peso del file

JPEG è spesso adatto alle fotografie. PNG è utile quando serve la trasparenza. SVG funziona bene per loghi, icone e illustrazioni composte da forme. WebP e AVIF possono offrire file più leggeri mantenendo una buona qualità.

Qualunque formato tu scelga, evita file molto più grandi dello spazio in cui appariranno. Un’immagine pesante rallenta la pagina, soprattutto su una connessione mobile.