Which statement about responsive image delivery is correct?

• A. Always serve the same image to every device to avoid complexity.
• B. Use srcset and sizes to deliver appropriate image versions for different viewport widths.
• C. Avoid responsive images; scale with CSS.
• D. Use only SVG for all images.

Answer: (B)

Delivering images in a way that fits different devices means letting the browser choose the most suitable file based on the screen it’s shown on. The srcset attribute on an image tag provides multiple versions of the same image, each with a descriptor indicating its size or pixel density. The sizes attribute then guides the browser on how wide the image will appear in the layout at different viewport widths. With this duo, the browser picks a file that matches the actual display size, so phones get smaller, lighter images and desktops get larger, higher-quality ones, improving load time and visual quality. The picture element can add even finer control by selecting different sources under specific conditions.

Other approaches miss those benefits: serving one image to all devices wastes bandwidth, and scaling a single image with CSS doesn’t reduce what’s downloaded and can blur quality on high-density screens. SVG works well for vector graphics, but isn’t always suitable for photos or complex images. So using srcset and sizes is the most effective way to deliver appropriate image versions for varying viewport widths.