The next/image component optimizes images on demand, serves modern formats, and prevents layout shift — a frequent performance interview topic.
Common Interview Questions
Q: Why use next/image over <img>?
Answer: Automatic srcset, WebP/AVIF, lazy loading by default, and CLS prevention via required dimensions or fill + sizes.
<Image
src="/hero.jpg"
alt="Hero"
width={1200}
height={600}
priority
/>
Q: What does priority do?
Answer: Preloads LCP image, disables lazy loading. Use sparingly for above-the-fold hero images only.
Q: Remote images configuration?
Answer: Whitelist external domains for optimization pipeline. Without config, remote images throw configuration errors.
// next.config.js
images: { remotePatterns: [{ hostname: "cdn.example.com" }] }
Q: fill layout?
Answer: Parent needs position: relative. Image uses fill with object-fit and sizes prop so browser picks correct responsive width.
Key Points for Interviews
-
Always provide alt text for a11y and SEO
-
width/height prevent layout shift
-
priority only for LCP candidates
-
Configure remotePatterns for CDNs
-
Static imports give automatic width/height