Immagini per il web: formati, dimensioni e lazy loading

In molte pagine le immagini rappresentano la parte più pesante del trasferimento. Sono anche la causa più comune di un caricamento lento del contenuto principale e degli spostamenti improvvisi del layout. La buona notizia è che l'HTML moderno offre strumenti nativi per servire l'immagine giusta al dispositivo giusto, senza librerie esterne.

Scegliere il formato

Ogni formato ha un ambito in cui rende al meglio:

Per le fotografie, WebP e AVIF permettono di ridurre sensibilmente il peso rispetto a JPEG. Per loghi e icone, l'SVG è quasi sempre la scelta migliore: resta nitido su qualsiasi schermo e pesa pochi kilobyte. Se l'SVG proviene da un programma di grafica, conviene ripulirlo dai metadati superflui prima di pubblicarlo.

Offrire più formati con picture

L'elemento picture lascia scegliere al browser il primo formato che supporta:

<picture>
  <source srcset="/img/foto.avif" type="image/avif">
  <source srcset="/img/foto.webp" type="image/webp">
  <img src="/img/foto.jpg" alt="Descrizione della foto"
       width="1200" height="800">
</picture>

Il img finale è obbligatorio: è quello che viene effettivamente mostrato, con gli attributi alt, width e height, mentre i source cambiano solo il file sorgente.

Servire la dimensione giusta

Un errore frequente è caricare un'immagine larga 3000 pixel per mostrarla in un riquadro di 400. Il browser la ridimensiona, ma l'utente ha comunque scaricato tutto il file. Gli attributi srcset e sizes risolvono il problema:

<img
  src="/img/prodotto-800.jpg"
  srcset="/img/prodotto-400.jpg 400w,
          /img/prodotto-800.jpg 800w,
          /img/prodotto-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Lampada da tavolo in ottone"
  width="800" height="800">

• srcset elenca le versioni disponibili con la loro larghezza reale (400w significa 400 pixel).
• sizes dice al browser quanto sarà larga l'immagine sulla pagina: a tutta larghezza sugli schermi fino a 600 pixel, metà della finestra negli altri casi.

Con queste informazioni il browser calcola quale file scaricare, tenendo conto anche della densità dei pixel dello schermo. Un telefono con schermo ad alta densità sceglierà una versione più grande di quanto suggerisce la sola larghezza in CSS, ed è corretto così.

Se ometti sizes, il browser presume che l'immagine occupi tutta la larghezza della finestra e tende a scaricare versioni troppo grandi.

Riservare lo spazio

Specificare width e height sull'immagine non serve a fissarne la dimensione visiva (quella la gestisci con il CSS), ma permette al browser di calcolare il rapporto d'aspetto prima del download. Così riserva lo spazio corretto e il testo sotto non salta quando l'immagine arriva.

img {
  max-width: 100%;
  height: auto;
}

Questa regola, unita agli attributi nell'HTML, mantiene le proporzioni e rende le immagini fluide. Per riquadri con proporzioni fisse puoi usare anche aspect-ratio e object-fit: cover.

Lazy loading: sì, ma non ovunque

L'attributo nativo loading="lazy" rimanda il download delle immagini finché non si avvicinano all'area visibile:

<img src="/img/galleria-12.webp" loading="lazy"
     alt="..." width="600" height="400">

È perfetto per gallerie, liste lunghe e immagini a fondo pagina. È invece dannoso per l'immagine principale in cima alla pagina: ritardarla significa peggiorare il tempo di caricamento percepito. Per quella usa il caricamento normale e, se è l'elemento più importante, aggiungi fetchpriority="high".

Anche decoding="async" può aiutare, permettendo al browser di decodificare l'immagine senza bloccare il resto del rendering.

Testo alternativo

Ottimizzare un'immagine significa anche renderla comprensibile. L'attributo alt descrive il contenuto per chi usa un lettore di schermo e compare quando l'immagine non si carica. Qualche regola:

• descrivi ciò che l'immagine comunica nel contesto, non ogni dettaglio;
• non iniziare con "immagine di": il lettore di schermo annuncia già che si tratta di un'immagine;
• per immagini puramente decorative usa alt="" (vuoto, non assente), così vengono ignorate;
• se l'immagine è un link, l'alt deve descrivere la destinazione.

Automatizzare il lavoro

Preparare manualmente tre formati in quattro dimensioni per ogni immagine non è sostenibile. Le soluzioni tipiche sono due:

1. In fase di build: molti generatori di siti statici e strumenti di build hanno plugin che creano automaticamente le varianti e scrivono il markup con srcset.
2. Tramite un servizio di trasformazione: alcuni CDN e servizi di immagini generano al volo la dimensione e il formato richiesti tramite parametri nell'URL e mettono il risultato in cache.

In entrambi i casi conserva gli originali ad alta qualità: ti permetteranno di rigenerare le varianti quando cambierai layout o comparirà un formato migliore.

In sintesi

• Usa SVG per loghi e icone, WebP o AVIF per le fotografie, con JPEG come riserva.
• srcset e sizes permettono al browser di scaricare solo la dimensione necessaria.
• Indica sempre width e height per evitare spostamenti del layout.
• Applica loading="lazy" alle immagini lontane dall'inizio della pagina, mai a quella principale.
• Scrivi testi alternativi utili e automatizza la generazione delle varianti.