Immagini Responsive: srcset, sizes e Art Direction

Perché le immagini responsive contano

Dispositivi diversi (mobile, tablet, desktop) hanno diverse dimensioni di schermo e risoluzioni. Una singola dimensione di immagine non è ottimale per tutti i dispositivi.

Le immagini grandi sprecano banda su mobile. Le immagini piccole sembrano pixelate su desktop. Le immagini responsive servono la dimensione giusta per ogni dispositivo.

Core Web Vitals: Le immagini responsive migliorano le metriche LCP (Largest Contentful Paint) e CLS (Cumulative Layout Shift).

Attributo srcset

srcset fornisce al browser opzioni di immagine a diverse risoluzioni. Il browser seleziona l'immagine più appropriata in base al DPR (Device Pixel Ratio) e alla dimensione del viewport del dispositivo.

Descrittore di larghezza: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" src="medium.jpg" alt="...">. L'unità w specifica la larghezza naturale dell'immagine.

Descrittore di densità: <img srcset="image.jpg 1x, image@2x.jpg 2x" src="image.jpg" alt="...">. L'unità x specifica la densità di pixel del dispositivo.

Selezione del browser: Il browser seleziona l'immagine più appropriata in base alla dimensione del viewport, DPR e condizioni di rete. Questa selezione è automatica e ottimizzata.

Attributo sizes

sizes specifica la dimensione che l'immagine occuperà nel viewport. Il browser usa sizes insieme a srcset per selezionare l'immagine più appropriata.

Esempio: <img srcset="small.jpg 400w, medium.jpg 800w, large.jpg 1200w" sizes="(max-width: 600px) 100vw, (max-width: 1200px) 50vw, 33vw" src="medium.jpg" alt="...">.

Condizioni media: (max-width: 600px) 100vw → Su schermi inferiori a 600px, l'immagine occupa il 100% della larghezza del viewport.

Fallback: L'ultimo valore (33vw) è la dimensione predefinita. Questo valore viene usato quando nessuna condizione media corrisponde.

vw (viewport width): 100vw = larghezza del viewport. 50vw = metà della larghezza del viewport.

Art Direction

L'art direction serve diverse composizioni di immagine (crop, zoom) a diverse dimensioni di schermo. Fatto con l'elemento <picture>.

Esempio: <picture><source media="(min-width: 800px)" srcset="desktop.jpg"><source media="(min-width: 400px)" srcset="tablet.jpg"><img src="mobile.jpg" alt="..."></picture>.

Casi d'uso: Crop diversi per le immagini hero. Immagine verticale su mobile, orizzontale su desktop. Versioni diverse per loghi e icone.

Selezione del formato: Con <picture> possono anche essere serviti formati diversi: <source type="image/webp" srcset="image.webp"><img src="image.jpg" alt="...">.

Lazy Loading e Async Decoding

loading="lazy": Carica l'immagine solo quando si avvicina al viewport. Aumenta la velocità di caricamento della pagina e risparmia banda.

decoding="async": Separa il processo di decodifica dell'immagine dal thread principale. Non blocca il rendering della pagina.

fetchpriority="high": Alta priorità per l'immagine LCP. Il browser carica questa immagine prima.

Placeholder: Mostra un placeholder di bassa risoluzione con la tecnica blur-up. Un placeholder sfocato viene mostrato durante il caricamento dell'immagine.

Consigli di Prestazione

Formati di immagine: Usate WebP o AVIF. 25-50% più piccolo di JPEG. Servite JPEG/PNG come fallback.

Compressione: Comprimete le immagini. Usate TinyPNG, Squoosh o ImageOptim. Quality 80-85 è generalmente sufficiente.

Dimensioni: Aggiungete attributi width e height alle immagini. Previene il CLS (Cumulative Layout Shift).

CDN: Servite le immagini da CDN. I CDN di immagini come Cloudinary, Imgix eseguono il resize e la conversione di formato automaticamente.

Test delle immagini responsive: Verificate quale immagine viene caricata nella scheda Network di Chrome DevTools. Testate su diversi viewport.