What is Next.js Image optimization?
Why Interviewers Ask This
This is a classic screening question for Next.js roles. Hiring managers ask it early in interviews to gauge your baseline understanding and determine if you can communicate technical concepts clearly.
Answer
Next.js provides a built-in <Image> component (next/image) that automatically optimizes images: import Image from "next/image"; <Image src="/photo.jpg" alt="A photo" width={800} height={600} priority />. Automatic optimizations: (1) WebP/AVIF conversion: serves modern formats to browsers that support them (JPEG → WebP reduces size by ~30%); (2) Responsive sizes: automatically generates multiple image sizes and uses srcset for different device widths; (3) Lazy loading: images are lazy-loaded by default (below the fold) — add priority for LCP images (above the fold); (4) Cumulative Layout Shift (CLS) prevention: requires width and height props to reserve space; (5) On-demand optimization: images are optimized on first request and cached at the CDN edge; (6) Placeholder blur: placeholder="blur" blurDataURL="..." — shows blurred placeholder while loading. Remote images: configure allowed domains in next.config.js: images: { remotePatterns: [{ hostname: "images.unsplash.com" }] }. fill: <Image src="..." alt="..." fill className="object-cover" /> — fills parent container (parent must be position: relative). sizes prop: sizes="(max-width: 768px) 100vw, 50vw" — helps browser select the right image size. Custom loader: use a custom function to generate image URLs from a CDN.
Pro Tip
If you're unsure about a detail, say so honestly and explain your reasoning. Interviewers respect candidates who can think through uncertainty rather than bluffing.