Explain how next/image's sizes prop works for responsive performance

What's really being asked

Whether you understand the browser's native responsive image selection algorithm and how Next.js leverages it. Specifically, it checks if you know that sizes is a layout hint for the browser, not a directive to the image optimizer, and that omitting it causes the browser to assume the image is full viewport width, leading to wasted bandwidth.

The full answer

First, the relationship between sizes and srcset. Next.js generates multiple image URLs at different widths in the srcset attribute automatically. The sizes prop tells the browser the intended display width of the image slot for each media condition. Second, the browser math. The browser evaluates the media conditions in sizes top-to-bottom, picks the first matching one, takes the specified width, multiplies it by the device pixel ratio, and then selects the smallest srcset candidate that is still larger than that value. Third, the performance impact. Without sizes, the browser defaults to 100vw, which on a 1440px monitor with 2x DPR means selecting an image wider than 2880px even if the actual rendered image is only 400px wide. Fourth, the syntax. A correct value looks like a media query plus width, such as sizes="(max-width: 800px) 100vw, 50vw", which maps directly to CSS breakpoints.

The mistakes people make

Confusing sizes with the width and height props. Width and height prevent layout shift by reserving space; sizes guides srcset selection. Another mistake is thinking sizes limits the CSS size of the image. It does not. Some candidates also believe Next.js uses sizes to decide which image to generate at build time. Next.js generates a full srcset regardless; sizes is purely runtime browser behavior. Finally, omitting sizes on a responsive image is a red flag because it silently defeats the purpose of the srcset optimization.

What usually comes next

How does the priority prop interact with lazy loading and sizes? When would you use fill mode instead of explicit width and height, and how does that change the sizes requirement? How do you handle art direction versus resolution switching? What happens if the sizes value does not match the actual CSS layout? The interviewer might also ask how to verify the correct image is being downloaded using Chrome DevTools Network panel.

A concrete example

Imagine a hero banner that is full width on mobile but constrained to a 600px sidebar on desktop. You write sizes="(max-width: 768px) 100vw, 600px". On an iPhone with 390 CSS pixels and 3x DPR, the browser sees 100vw, calculates 390 times 3 equals 1170px, and picks the 1200w srcset candidate. On a desktop monitor at 1512px viewport with 2x DPR, the 768px media condition fails, so the browser uses 600px, multiplies by 2 to get 1200px, and again picks the 1200w candidate. Without sizes, the desktop browser would default to 100vw, compute 3024px, and download a 3200w or larger image, wasting roughly 1.8 megabytes on a high-resolution photo.