Performance
srcset e sizes senza errori
srcset elenca le varianti, sizes dice quanto spazio occupa l'immagine. Senza sizes il browser scarica il file più grande: sintassi, errori e verifica.
In sintesi
- Con il descrittore w il browser sceglie la variante in base a sizes e alla densità.
- Senza sizes il browser assume 100vw e prende il file più grande.
- srcset non converte i formati e non crea le varianti: i file devono esistere.
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.
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
| Errore | Cosa scarica il browser | Correzione |
|---|---|---|
| sizes assente | La variante più grande, sempre | Dichiara la larghezza reale del contenitore |
| sizes troppo larga | Una variante più grande del necessario | Allinea sizes al breakpoint del layout |
| w e x insieme | La prima variante valida | Usa solo w con sizes |
| width e height assenti | Nulla in più, ma il layout si sposta | Aggiungi width, height e aspect-ratio |
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.
Domande frequenti
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.