next/image è il rimpiazzo ottimizzato di Next.js per il tag <img>. Applica automaticamente una serie di best practice per le performance delle immagini che altrimenti implementeresti manualmente.
tsx
;
() {
(
);
}
next/image è il rimpiazzo ottimizzato di Next.js per il tag <img>. Applica automaticamente una serie di best practice per le performance delle immagini che altrimenti implementeresti manualmente.
;
() {
(
);
}
srcset responsivo — genera più dimensioni in modo che ogni dispositivo scarichi quella corretta.priority).width/height obbligatorio (o fill) riserva spazio in modo che la pagina non saltelli quando l'immagine si carica.placeholder="blur" mostra una piccola anteprima sfocata durante il caricamento.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Usa fill (invece di larghezza/altezza fisse) quando l'immagine deve riempire il suo parent posizionato — comune per immagini hero/cover.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Le immagini sono solitamente gli asset più pesanti su una pagina e una causa principale di scarsi Core Web Vitals (LCP, CLS). next/image automatizza il ridimensionamento, i formati moderni, il srcset responsivo, il lazy loading e la prevenzione dello spostamento del layout — trasformando un compito significativo di performance in un singolo component, con priority per l'immagine LCP essendo l'unico parametro che devi ricordare.