HTML & CSS Interview Question #48

What are srcset and sizes used for in responsive images?

Forms, Validation, Metadata, Media, Responsive Images & Accessibility Mid-Level Intermediate

Quick Interview Answer

srcset lets an img element provide multiple image candidates, while sizes describes the expected rendered width under different viewport conditions. The browser can then choose an appropriate resource based on layout, device pixel density, and other factors.

Detailed Explanation

srcset lets an img element provide multiple image candidates, while sizes describes the expected rendered width under different viewport conditions. The browser can then choose an appropriate resource based on layout, device pixel density, and other factors.

Responsive images can reduce unnecessary downloads on smaller devices while preserving image quality on larger or high-density displays.

Code Example

<img src="projector-800.jpg"
     srcset="
        projector-400.jpg 400w,
        projector-800.jpg 800w,
        projector-1200.jpg 1200w"
     sizes="
        (max-width: 600px) 100vw,
        50vw"
     alt="Portable projector">