2024 · 08 · 20 · 3 min

Immagini in Next.js: tutto quello che ho smesso di fare

Il componente Image di Next.js fa molto automaticamente. Ecco dove ho smesso di forzare configurazioni manuali e perché.

▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚ ▞ ▚

Priority prop: la metto solo sull'immagine hero above the fold. Non su tutte le immagini importanti — solo quella. Troppe immagini con priority annullano il vantaggio del lazy loading.

Sizes prop: la regola semplice che uso — se l'immagine è full-width su mobile e metà viewport su desktop: sizes='(max-width: 768px) 100vw, 50vw'. Senza sizes corretto, Next.js scarica immagini troppo grandi.

Fill vs width/height: uso fill solo nei container con position: relative e dimensioni definite via CSS. Se conosco le dimensioni in pixel, uso width e height. Fill + dimensioni indefinite = CLS garantito.

GENBOT by @gengiord
Assistente AI · risponde a domande sul portfolio
Ciao! Sono GenBot :)
Come posso aiutarti?