next/image est le remplacement optimisé de Next.js pour la balise <img>. Il applique automatiquement une série de bonnes pratiques en matière de performance des images que vous devriez sinon implémenter manuellement.
;
() {
(
);
}
srcset réactif — génère plusieurs tailles pour que chaque appareil télécharge la bonne.priority).width/height requis (ou fill) réservent l'espace pour que la page ne saute pas quand l'image se charge.placeholder="blur" affiche un petit aperçu flou pendant le chargement.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Utilisez fill (au lieu de width/height fixes) quand l'image doit remplir son parent positionné — courant pour les images hero/de couverture.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Les images sont généralement les ressources les plus lourdes d'une page et une cause majeure de mauvaises Core Web Vitals (LCP, CLS). next/image automatise le redimensionnement, les formats modernes, le srcset réactif, le chargement lazy et la prévention du décalage de mise en page — transformant une tâche de performance majeure en un seul composant, avec priority pour l'image LCP étant le seul bouton que vous devez vous souvenir.