Immagini responsive: capire srcset e sizes

Un’immagine può adattarsi perfettamente alla larghezza dello schermo e rimanere comunque inutilmente pesante. È uno dei problemi più frequenti del responsive design.

Con il CSS:

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

una fotografia larga 4.000 pixel può essere mostrata correttamente in una colonna da 360 px. Ma se il browser scarica sempre il file da 4.000 px, l’utente mobile riceve molti più dati del necessario.

Le immagini responsive risolvono proprio questo problema: forniscono più risorse possibili e lasciano al browser la scelta della variante adatta.

Immagine fluida e immagine responsive

Un’immagine fluida adatta il proprio rendering al contenitore tramite CSS. Il file scaricato può però restare lo stesso.

Un’immagine responsive offre invece più file, per esempio:

foto-480.webp
foto-800.webp
foto-1200.webp
foto-1600.webp

CSS adatta quindi l’aspetto, mentre srcset e sizes adattano la risorsa scaricata.

Perché non inviare sempre l’immagine più grande?

Perché la dimensione ha un costo. Se una variante da 800 px pesa 110 kB e una da 2.000 px ne pesa 420, inviare sempre la seconda a un telefono può aggiungere centinaia di kilobyte per immagine.

Su gallerie, cataloghi o pagine con molte immagini, lo spreco diventa significativo.

E perché non usare sempre la più piccola?

Una risorsa da 480 px può apparire poco nitida su schermi grandi o ad alta densità. Bisogna bilanciare dimensioni, densità, peso e qualità. Le immagini responsive permettono di fornire più risposte anziché imporre una misura universale.

Preparare le varianti

L’HTML non genera automaticamente le immagini. A partire da un originale sufficiente puoi creare, per esempio:

hero-480.webp
hero-768.webp
hero-1024.webp
hero-1440.webp
hero-1920.webp

Il ridimensionatore di immagini prepara le larghezze; il convertitore può cambiare formato e compressione.

Non serve creare una variante per ogni possibile larghezza: scegli una serie ragionevole di intervalli coerenti con il layout.

Come funziona srcset con il descrittore w

Un esempio tipico:

<img
  src="foto-800.webp"
  srcset="foto-480.webp 480w, foto-800.webp 800w, foto-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 800px"
  alt="Descrizione">

Il valore 480w descrive la larghezza intrinseca della risorsa, non la larghezza CSS a cui sarà necessariamente mostrata.

sizes comunica invece una stima dello spazio che l’immagine occuperà nel layout. Il browser combina queste informazioni con viewport e densità del dispositivo per scegliere una candidata.

Il descrittore di densità x

Per immagini che hanno una dimensione CSS sostanzialmente fissa si può usare un set basato sulla densità:

<img
  src="logo.png"
  srcset="logo.png 1x, logo@2x.png 2x"
  alt="Logo">

Non bisogna mescolare w e x nello stesso srcset senza comprendere il modello di selezione. Per immagini di contenuto che cambiano larghezza con il layout, i descrittori w con sizes sono spesso più appropriati.

Cosa descrive realmente sizes?

sizes non impone direttamente una larghezza CSS. Aiuta il browser a stimare, prima che tutto il layout sia noto, quanto spazio occuperà l’immagine. Il CSS resta responsabile del rendering finale.

Se sizes dichiara 100vw ma l’immagine occupa in realtà metà viewport, il browser può scegliere un file più grande del necessario. La qualità della configurazione dipende quindi dalla coerenza con il layout reale.

Quando usare picture?

<picture> è utile per art direction o per offrire formati diversi:

<picture>
  <source type="image/avif" srcset="hero.avif">
  <source type="image/webp" srcset="hero.webp">
  <img src="hero.jpg" alt="Descrizione">
</picture>

Può anche servire quando su mobile è necessario un ritaglio diverso, non semplicemente un file più piccolo.

Le immagini responsive non sostituiscono la compressione

Un file da 800 px può essere ancora troppo pesante se formato e qualità sono inadeguati. La strategia completa combina:

1. dimensioni coerenti;
2. più varianti quando servono;
3. formato appropriato;
4. compressione controllata;
5. srcset e sizes coerenti;
6. verifica del risultato nel browser.

Errori frequenti

Usare un srcset con file tutti della stessa dimensione. Il browser non ottiene un vero vantaggio.

Dichiarare larghezze errate. I descrittori w devono riflettere le dimensioni reali delle risorse.

Scrivere sizes senza guardare il CSS. Il browser riceve informazioni incoerenti e può scaricare una variante sovradimensionata.

Dimenticare width e height. Dichiarare le dimensioni aiuta il browser a riservare lo spazio e riduce gli spostamenti di layout.

Come verificare

Apri gli strumenti di sviluppo del browser, prova viewport differenti e osserva quale risorsa viene realmente scaricata. Controlla anche schermi ad alta densità quando possibile.

La domanda non è soltanto «l’immagine è nitida?», ma anche «il browser ha scaricato una risorsa proporzionata alla dimensione effettiva?».

Da ricordare

Un’immagine responsive non è semplicemente un’immagine che si restringe con il CSS. È una strategia in cui il browser può scegliere la risorsa più adatta al contesto, evitando sia file inutilmente grandi sia immagini troppo piccole e sfocate.