Le immagini responsive permettono al browser di scegliere l'immagine migliore per il dispositivo — risparmiando banda su telefoni e fornendo immagini nitide su schermi ad alta DPI.
srcset + sizes — stessa immagine, risoluzioni diverse
html
Le immagini responsive permettono al browser di scegliere l'immagine migliore per il dispositivo — risparmiando banda su telefoni e fornendo immagini nitide su schermi ad alta DPI.
srcset elenca le immagini candidate con le loro larghezze intrinseche (400w = 400px di larghezza).sizes dice al browser quanto larga sarà l'immagine visualizzata a diversi breakpoint (qui: larghezza intera del viewport sotto 600px, altrimenti metà).sizes + la densità di pixel del dispositivo per scegliere l'immagine più piccola che appaia ancora nitida — prima di scaricare qualcosa.Un telefono potrebbe scegliere small.jpg; un laptop Retina che la mostra al 50% di larghezza potrebbe scegliere large.jpg.
<picture>
<source srcset="hero.avif" type="image/avif" /> <!-- modern format -->
<source srcset="hero.webp" type="image/webp" />
<source media="(max-width: 600px)" srcset="hero-cropped.jpg" /> <!-- different crop on mobile -->
<img src="hero.jpg" alt="Hero" /> <!-- required fallback -->
</picture>
Il browser utilizza il primo <source> che supporta/corrisponde. Usa <picture> quando hai bisogno di formati diversi (servire AVIF/WebP con fallback JPEG) o di un ritaglio diverso per dimensione dello schermo (art direction) — cose che srcset da solo non può fare.
srcset + sizes.<picture>.Servire immagini giuste per dimensione e formato moderno è uno dei maggiori vantaggi di performance per il web — riduce drasticamente l'utilizzo di dati mobile e migliora Largest Contentful Paint.
Questi strumenti nativi permettono al browser di fare la scelta ottimale automaticamente, con fallback gradevoli per browser più vecchi.