How would you serve appropriately-sized images so a phone doesn't download a huge desktop image?

technical-conceptual · Junior level · software-engineering

What the interviewer is really asking

Tests whether the candidate knows the responsive-images toolkit — srcset, sizes, and the picture element — and why it matters for mobile performance.

What to say

• Use the <img> srcset attribute to list the same image at several widths (e.g. small-480w, medium-800w, large-1600w) and let the browser pick the best one for the device's screen size and pixel density.
• Pair srcset with the sizes attribute, which tells the browser how wide the image will actually display in your layout (e.g. '100vw on mobile, 50vw on desktop') so it can choose before the CSS is even applied.
• Reach for the <picture> element with <source media=...> when you need art direction — a genuinely different crop or aspect ratio per breakpoint, or a modern format like AVIF/WebP with a fallback — rather than just different sizes of the same image.

What to avoid

• Ship one large fixed image and only scale it down with CSS width — that still downloads the full-size file on every device, so the phone pays the full bytes.
• Confuse srcset (multiple sizes/densities of the same image) with <picture> (different images or formats per condition) — they solve different problems.
• Forget sizes when using width descriptors — without it the browser can't reason about display width and may pick a larger file than needed.

Example answers

Strong: I'd give the <img> a srcset listing the photo at 480w, 800w, and 1600w plus a sizes attribute saying it's 100vw on phones and 50vw on desktop. The browser then downloads the smallest file that still looks sharp for that screen and pixel density, so a phone never pulls the 1600px version.

Weak: I just set a max-width of 100% in CSS so the image scales down to fit — that makes it responsive.