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.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona