srcset attribute: responsive images
L'attributo srcset permette di indicare al browser più versioni della stessa immagine a risoluzioni differenti, lasciandogli scegliere la più adatta in base al viewport e alla densità di pixel del display. È lo strumento principe per il responsive images, riducendo la banda consumata su device piccoli senza sacrificare qualità su quelli ad alta risoluzione. Vediamo come usarlo.
Descrittori w e x
Srcset usa due tipi di descrittori. Il descrittore w (es. 800w) indica la larghezza in pixel dell'immagine. Il descrittore x (es. 2x) indica la densità di pixel (1x = standard, 2x = retina). Il primo è più potente e va abbinato all'attributo sizes per indicare al browser quanto spazio occuperà l'immagine. Con w il browser sceglie automaticamente la versione ottimale.
Sizes attribute
Sizes indica al browser quanto spazio occuperà l'immagine in vari viewport: sizes="(max-width: 768px) 100vw, 50vw" dice "fino a 768px occupa tutta la larghezza viewport, oltre occupa la metà". Il browser combina questa informazione con srcset per scegliere la dimensione ottimale, scaricando solo i pixel necessari. È fondamentale per evitare di scaricare immagini più grandi del necessario.
Tool per generare versioni multiple
Generare manualmente più risoluzioni di ogni immagine è impraticabile. Strumenti automatizzati: ImageMagick e GraphicsMagick da CLI, Sharp in Node.js per pipeline build, Pillow in Python, modulo image di Next.js/Nuxt/Astro che genera srcset automaticamente al build. CDN dedicate come Cloudinary, Imgix, Bunny.net offrono trasformazioni on-the-fly via URL: passi parametri di larghezza e il CDN restituisce la dimensione richiesta cache-ata. Soluzione plug-and-play per siti con molte immagini caricate dagli editor di contenuti.
Density descriptors x
Il descrittore x è più semplice e si usa quando l'immagine ha sempre lo stesso layout ma serve adattare per display retina: srcset="logo.png 1x, logo@2x.png 2x, logo@3x.png 3x". Browser sceglie in base a devicePixelRatio. Utile per loghi, icone e immagini con layout fisso. Quando combinato con sizes non serve, ma per pattern semplici è più immediato. Non mescolare descrittori w e x nello stesso srcset, il comportamento è imprevedibile e i browser potrebbero scegliere l'immagine sbagliata.
CDN immagini moderne
CDN dedicate per immagini come Cloudinary, Imgix, Bunny.net e KeyCDN trasformano immagini al volo via parametri URL: ?w=800&q=80&f=webp. Generi srcset semplicemente puntando alla stessa CDN con larghezze diverse. Cache CDN globale serve risultati cached in pochi ms da edge nodes vicini all'utente. Risparmio infrastrutturale enorme: nessuna pipeline build per generare versioni, nessuno storage di varianti, scalabilità automatica. Pricing variabile ma competitivo per traffico medio. Soluzione plug-and-play per siti enterprise e ecommerce che gestiscono migliaia di immagini caricate dagli editor del CMS.
Aspect ratio e CLS
Specificare width e height su img (anche se l'immagine è responsive via CSS max-width: 100%) permette al browser di calcolare l'aspect ratio e riservare lo spazio prima del caricamento. Previene il Cumulative Layout Shift, una delle metriche Core Web Vitals più importanti. Aspect ratio calcolato come width/height. CSS aspect-ratio property completa il pattern. Senza queste accortezze, le immagini caricano e spingono il contenuto verso il basso, creando jank visivo molto fastidioso. Best practice obbligatoria nel 2026, supporto universale, performance gain immediato.
Image optimization tools
Per ottimizzare immagini al build: Sharp (Node.js) è la libreria più performante, usata da Next.js, Nuxt, Astro internamente. Imagemin con plugin specifici (imagemin-mozjpeg, imagemin-pngquant) genera versioni ottimizzate. Per Python, Pillow + Pillow-AVIF-plugin per moderni formati. Squoosh.app di Google ottimizza singole immagini interattivamente nel browser. Per Photoshop/Figma, plugin di export ottimizzato. Strategia: pipeline build genera srcset completo (es. 400, 800, 1200, 1600w) in formati moderni (WebP, AVIF) + fallback JPG. Risultato: zero lavoro manuale per editor, performance ottimale automatica per ogni nuova immagine caricata.
Procedura passo-passo
- Genera l'immagine in più dimensioni (es. 400, 800, 1200, 1600px di larghezza).
- Crea l'img con src="img-default.jpg" alt="...".
- Aggiungi srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w".
- Imposta sizes che descrive il layout: sizes="(max-width: 600px) 100vw, 50vw".
- Per immagini con densità diverse usa il descrittore x: srcset="img.jpg 1x, img-2x.jpg 2x".
- Includi loading="lazy" per immagini below-the-fold.
- Verifica con DevTools Network che venga scaricata la versione corretta.
Errori comuni e come risolverli
- Mescolare w e x: usa solo un tipo di descrittore per srcset, non entrambi insieme.
- Sizes mancante con w: senza sizes il browser non sa quanto spazio occuperà l'immagine, scegliendo male.
- Solo immagini grandi: rinunciare alle versioni piccole spreca banda su mobile.
- Src mancante: srcset richiede sempre un src di fallback per browser legacy o errori.
- Sizes troppo generico: usa media query precise per matchare il layout reale del sito.
Domande frequenti
D: Quante versioni servono?
R: Tipicamente 3-5 dimensioni coprono bene da mobile a 4K. Calcola in base ai breakpoint del sito.
D: Srcset richiede picture?
R: No, srcset è un'attributo di img. Picture serve per art direction più avanzata.
D: Quale impatto sulle performance?
R: Significativo: download solo della dimensione necessaria. Risparmi fino al 70% di banda su mobile.
D: Supportato da tutti i browser?
R: Sì, supporto universale da anni. Fallback su src per browser molto vecchi.
Hai bisogno di aiuto?
Se vuoi sviluppo web con il team di G Tech Group, scrivici tramite il modulo di contatto.