What best describes responsive imagery and how srcset and picture are used?

• A. Always serve the largest image for quality.
• B. Load images lazily without considering device context.
• C. Use srcset and picture to serve different image sources based on viewport and DPR.
• D. Use a single image for all devices.

Answer: (C)

Responsive imagery means loading the right image for the right device. srcset provides multiple image sources with descriptors that indicate their size or pixel density, and the sizes attribute helps tell the browser how wide the image will appear in the layout. Together, they let the browser pick the most appropriate resource for the current viewport width and device pixel ratio, so high-DPI screens get crisp images while smaller screens avoid downloading unnecessarily large files. The picture element adds even more control by containing multiple source elements that can apply different media conditions or formats; the browser evaluates these options and uses the first match, falling back to the img when none apply. This enables art direction and format choices (for example, providing a WebP version when supported and a JPEG fallback otherwise) without wasted bandwidth. This approach is much better than always serving the largest image, loading images without regard to device context, or sticking to a single image for every device.