next/image is Next.js's optimized replacement for the <img> tag. It automatically applies a stack of image performance best practices that you'd otherwise implement by hand.
tsx
;
() {
(
);
}
next/image is Next.js's optimized replacement for the <img> tag. It automatically applies a stack of image performance best practices that you'd otherwise implement by hand.
;
() {
(
);
}
srcset — generates multiple sizes so each device downloads the right one.priority).width/height (or fill) reserve space so the page doesn't jump when the image loads.placeholder="blur" shows a tiny blurred preview while loading.<div style={{ position: "relative", height: 300 }}>
<Image src="/hero.jpg" alt="" fill style={{ objectFit: "cover" }} />
</div>
Use fill (instead of fixed width/height) when the image should fill its positioned parent — common for hero/cover images.
// next.config.js — allowlist remote hosts for security
module.exports = { images: { remotePatterns: [{ hostname: "cdn.example.com" }] } };
Images are usually the heaviest assets on a page and a top cause of poor Core Web Vitals (LCP, CLS). next/image automates resizing, modern formats, responsive srcset, lazy loading, and layout-shift prevention — turning a major performance chore into a single component, with priority for the LCP image being the one knob you must remember.
A library of IT interview questions with detailed answers — from Junior to Senior.
Donate