Which techniques enable responsive images that adapt to device resolution?

Which techniques enable responsive images that adapt to device resolution?

• A. Using a single fixed image URL
• B. Using background-image in CSS
• C. Using srcset and sizes attributes (and the picture element)
• D. Using media queries only

Answer: (C)

Delivering images that look sharp on all devices comes from giving the browser multiple image resources and telling it how large the image will appear. Using srcset and sizes on an img element, or using the picture element, provides those multiple sources and the rules for selecting among them. Srcset lists images at different resolutions, and sizes describes the layout width the image will take at various viewport widths. The browser uses this information, along with the device’s pixel density, to pick the most appropriate file, so a high-DPI device can load a denser image while a smaller or differently sized layout loads a lighter one. The picture element extends this by letting you specify different sources under different conditions, giving even finer control. This approach keeps the content accessible and semantic because the image remains in the HTML as an img (or within a picture), with graceful fallback if the feature isn’t supported. By contrast, a single fixed image URL can’t adapt to device characteristics; background images in CSS can be made responsive with media queries but don’t participate in the document’s image semantics and aren’t as flexible for inline content; and relying on media queries alone would require managing multiple assets without a built-in mechanism to select the best one for the device pixel ratio.

Delivering images that look sharp on all devices comes from giving the browser multiple image resources and telling it how large the image will appear. Using srcset and sizes on an img element, or using the picture element, provides those multiple sources and the rules for selecting among them. Srcset lists images at different resolutions, and sizes describes the layout width the image will take at various viewport widths. The browser uses this information, along with the device’s pixel density, to pick the most appropriate file, so a high-DPI device can load a denser image while a smaller or differently sized layout loads a lighter one. The picture element extends this by letting you specify different sources under different conditions, giving even finer control.

This approach keeps the content accessible and semantic because the image remains in the HTML as an img (or within a picture), with graceful fallback if the feature isn’t supported. By contrast, a single fixed image URL can’t adapt to device characteristics; background images in CSS can be made responsive with media queries but don’t participate in the document’s image semantics and aren’t as flexible for inline content; and relying on media queries alone would require managing multiple assets without a built-in mechanism to select the best one for the device pixel ratio.