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.
Una raccolta di domande di colloquio IT con risposte dettagliate — da Junior a Senior.
Dona