How would you optimize and implement a full-bleed responsive hero image?

WHAT THIS TESTS: This question tests your ability to deliver high fidelity visuals without sacrificing Core Web Vitals across a massive device spectrum. The interviewer wants to see that you understand the difference between resolution switching and art direction, that you know how modern image formats reduce file size, and that you can prevent layout shift while maintaining a full bleed visual treatment. It also surfaces whether you think about network conditions and not just pixel density.

A GOOD ANSWER COVERS: First, layout stability. You should mention setting explicit width and height attributes on the img element so the browser can reserve space before the image loads, eliminating Cumulative Layout Shift. Second, responsive image markup. Describe using either the picture element with source tags for art direction or an img with srcset and sizes for resolution switching, allowing the browser to pick the optimal file for a 375px versus 2560px viewport. Third, modern formats. Prioritize AVIF and WebP with JPEG or PNG fallbacks, noting that AVIF can reduce file sizes by roughly fifty percent compared to JPEG at similar quality. Fourth, CSS treatment. Use object-fit cover and object-position center to maintain aspect ratio while filling the container, paired with a container that is one hundred viewport width and height. Fifth, performance hints. Mention fetchpriority high for the hero image since it is likely the Largest Contentful Paint element, and avoid lazy loading above the fold content.

COMMON WRONG ANSWERS: A major red flag is suggesting a single four thousand pixel wide JPEG served to every device. This wastes mobile bandwidth and CPU. Another mistake is using background-image on a div instead of an img tag, which loses native responsive image capabilities, alt text for accessibility, and automatic browser optimization. Omitting width and height attributes is also a red flag because it signals you are not thinking about layout stability. Finally, suggesting lazy loading for a hero image without nuance shows a lack of understanding of LCP.

LIKELY FOLLOW-UPS: The interviewer may ask how you would handle a hero image with overlaid text, which opens discussion about contrast, safe zones, and potentially using picture for cropping at mobile breakpoints. They might ask how you would measure success, expecting answers about Lighthouse scores, real user monitoring for LCP, or using a content delivery network for format negotiation. Another follow up could be about content security policy or referrer policy on the image element.

ONE CONCRETE EXAMPLE: Imagine a landing page hero at 100 viewport height. In HTML, you include an img tag with width 3200 and height 1800, srcset pointing to AVIF files at 480w, 800w, 1200w, 1920w, and 2560w, and sizes set to 100vw. Inside a picture wrapper, you add source type avif and a fallback source type webp before the default img. In CSS, the img is set to width 100 percent, height 100 percent, object-fit cover. You add fetchpriority high to the img tag. On a 375px phone, the browser downloads the 480w AVIF, roughly 30 to 50 kilobytes, instead of a 2 megabyte JPEG.

Source: developer.mozilla.org