<picture> e srcset: immagini responsive e art direction

Un'unica immagine da 3000px, scaricata identica su un telefono e su un monitor 4K, spreca banda su uno dei due, spesso su entrambi. MDN distingue due problemi distinti, con due strumenti distinti: srcset cambia risoluzione (stessa immagine, pesi diversi); <picture> cambia il contenuto stesso dell'immagine, o il suo formato.

1. srcset con width descriptor: lascia scegliere al browser

srcset offre una lista di immagini candidate, ciascuna con un descrittore di larghezza (w). sizes dice al browser quanto spazio occuperà davvero l'immagine nel layout, un'informazione che il browser da solo non può dedurre in anticipo.

<img
  src="foto-800.jpg"
  srcset="foto-400.jpg 400w, foto-800.jpg 800w, foto-1200.jpg 1200w"
  sizes="(max-width: 600px) 100vw, (max-width: 1024px) 50vw, 800px"
  alt="Descrizione dell'immagine">

Il browser combina larghezza reale dello schermo, densità pixel e sizes per scegliere il file più adatto, non necessariamente il più piccolo, ma quello più vicino allo slot calcolato.

Fonte: MDN Web Docs, «Responsive images»: il browser calcola quale media condition in sizes è vera, poi sceglie tra i candidati di srcset l'immagine più vicina a quella dimensione.

2. srcset con density descriptor: schermi ad alta densità

Quando l'immagine ha sempre la stessa dimensione visiva (un logo, un'icona) e cambia solo la nitidezza richiesta dallo schermo, si usa il descrittore di densità pixel (x) invece di quello di larghezza.

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

Regola tecnica da non violare: MDN è chiara nel non mescolare mai descrittori w e x nello stesso srcset, sono due sistemi di selezione diversi.

Fonte: MDN Web Docs, «<img>»: è scorretto mescolare descrittori di larghezza e descrittori di densità pixel nello stesso attributo srcset.

3. <picture> per l'art direction: cambiare il contenuto, non solo la taglia

L'art direction è il problema di voler cambiare l'immagine mostrata per adattarla a dimensioni di visualizzazione diverse, per esempio mostrare una versione meno dettagliata su schermi piccoli, dove i dettagli fini andrebbero comunque persi.

<picture>
  <source media="(max-width: 600px)" srcset="foto-quadrata.jpg">
  <source media="(min-width: 601px)" srcset="foto-panoramica.jpg">
  <img src="foto-panoramica.jpg" alt="Descrizione dell'immagine">
</picture>

Il browser sceglie il primo <source> la cui condizione media risulta vera; <img> resta sempre obbligatorio come fallback, sia per condizioni non soddisfatte sia per browser che non supportano <picture>.

Un avvertimento pratico dal manuale: usa media solo per scenari di art direction, senza mescolarlo con i descrittori di larghezza sulla stessa fonte, per non confondere due meccanismi di selezione diversi.

Fonte: MDN Web Docs, «Responsive images»: usare l'attributo media solo per scenari di art direction.

4. <picture> per i formati moderni, con fallback sicuro

Il secondo uso di <picture>: offrire un formato più efficiente (WebP, o il più recente AVIF) a chi lo supporta, mantenendo un fallback JPEG universale.

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" alt="Descrizione dell'immagine">
</picture>

Il browser salta ogni <source> il cui type non riconosce, fino a raggiungere il primo che sa decodificare, o, in ultima istanza, l'<img> finale.

Fonte: MDN Web Docs, «<picture>»: il browser salta un <source> se non supporta il tipo MIME indicato nel suo attributo type; il fallback nell'esempio ufficiale usa AVIF, poi WebP, poi JPEG.

In sintesi

La domanda da farsi non è «uso srcset o <picture>?» ma «sto cambiando la dimensione o il contenuto dell'immagine?». Nel primo caso basta srcset; nel secondo, un crop diverso, un formato diverso, serve <picture>.