# srcset and sizes without mistakes

srcset lists the variants, sizes says how much room the image takes. Without sizes the browser fetches the largest file: syntax, mistakes and checks.

> Page: https://ui.eneawork.it/blog/immagini-responsive-srcset
> Markdown: https://ui.eneawork.it/blog/immagini-responsive-srcset.md

*2026-11-01*

srcset elenca le varianti con la loro larghezza in w, sizes dice quanto spazio occupa l'immagine nel layout. Senza sizes il browser assume 100vw e scarica il file più grande che ha.

Nei 62 file del client il sito ha 6 tag img: 1 dichiara srcset, 3 dichiarano width e height, 3 usano loading lazy, 2 usano fetchpriority. Il componente CompCard genera 7 larghezze (280, 400, 480, 490, 560, 700, 980) con sizes (max-width: 640px) 376px, 388px. Le 219 letture LCP del beacon hanno p75 1.672,7 ms, con 28 sopra i 2,5 s. Conteggi fatti il 1 novembre 2026 sui sorgenti, numeri da GET /api/rum/summary; catalogo letto da /api/stats: 111.985 componenti, 1.556 blocchi, 12.808 icone da 1.472 librerie. Sintassi: MDN, CC BY-SA 2.5.

## w, x e sizes: chi decide

Con il descrittore w il browser moltiplica lo spazio dichiarato in sizes per la densità dello schermo e sceglie la variante che lo copre. Con x sceglie per densità e ignora il layout. I due descrittori non si mescolano nello stesso srcset.

## Gli errori che costano byte

## Markup corretto

width e height danno il rapporto d'aspetto anche quando il CSS sovrascrive le dimensioni. Se l'immagine sta sopra la piega, togli loading="lazy": il caricamento ritardato su un elemento LCP peggiora la metrica.

## Verificare la scelta, non la sintassi

document.querySelectorAll("img").forEach((img) => console.log(img.currentSrc, img.naturalWidth));

In DevTools apri Network, filtra Img e guarda quale file arriva davvero: se a 375 px di viewport arriva la variante 980, il problema è sizes. currentSrc è la variante che il browser ha scelto, non quella che hai scritto.

## La limitazione da dichiarare

srcset non converte i formati e non crea le varianti: i file devono esistere, con le larghezze dichiarate. Per AVIF o WebP serve picture con source, e un srcset scritto a mano invecchia al primo cambio di layout: nel nostro catalogo lo genera il componente, ed è per questo che c'è una sola sizes da controllare.

## Dove continuare

Nel catalogo: responsive hero banner, reveal images e componenti hero. Le guide: immagini con next/image e immagini senza dimensioni; l'articolo gemello su LCP e il confronto Next.js o Vite.

## FAQ

### Che differenza c'è tra srcset e sizes?

srcset elenca le varianti disponibili con la loro larghezza o densità, sizes dice al browser quanto spazio occupa l'immagine. Il browser combina le due informazioni per scegliere il file.

### Posso usare srcset senza sizes?

Sì, ma solo con descrittori x. Con i descrittori w e senza sizes il browser assume che l'immagine occupi tutta la larghezza della viewport e scarica la variante più grande.

### Serve width e height con srcset?

Sì, se vuoi evitare layout shift. srcset sceglie il file, width e height riservano lo spazio: senza, il contenuto si sposta quando l'immagine arriva.

### srcset converte le immagini in WebP?

No. srcset sceglie fra file che esistono già. Per cambiare formato serve picture con più source, oppure un servizio che converte su richiesta.

### Come verifico quale file è stato scaricato?

Guarda currentSrc in console o la colonna della richiesta in DevTools con il filtro Img. Se il file scelto è più grande dello spazio disponibile, il problema è quasi sempre sizes.