A next/image a Next.js optimalizált helyettesítője az <img> címkéhez. Automatikusan alkalmaz egy sor képteljesítmény bevált gyakorlatot, amelyeket egyébként kézzel kellene megvalósítani.
tsx
;
() {
(
);
}
A next/image a Next.js optimalizált helyettesítője az <img> címkéhez. Automatikusan alkalmaz egy sor képteljesítmény bevált gyakorlatot, amelyeket egyébként kézzel kellene megvalósítani.
;
() {
(
);
}
srcset — több méretet generál, hogy minden eszköz a megfelelőt töltse le.priority).width/height (vagy fill) lefoglalja a helyet, így az oldal nem ugrál a kép betöltésekor.placeholder="blur" egy kis homályos előnézetet mutat a betöltés közben.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Használja a fill értéket (a rögzített szélességi/magassági helyett), ha a képnek ki kell töltenie a pozicionált szülőjét — gyakori a hero/borítóképeknél.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
A képek általában az oldal legtöbb súlyú erőforrásai és a rossz Core Web Vitals (LCP, CLS) fő oka. A next/image automatizálja az átméretezést, a modern formátumokat, a reszponzív srcset-et, a lusta betöltést és az elrendezés eltolódásának megelőzését — egy nagy teljesítménybeli feladatot egyetlen komponensre alakítva, a priority az LCP képnél az egyetlen vezérlő, amelyre emlékeznie kell.