Which markup is recommended for serving different image sources based on screen size and resolution?

Which markup is recommended for serving different image sources based on screen size and resolution?

• A. A single img tag with a fixed src.
• B. Multiple background-images.
• C. The picture element with appropriate source elements.
• D. Link tag to image.

Answer: (C)

When you want to serve different image sources based on how big the screen is or how dense the display is, use the picture element with multiple source elements. The browser tests the conditions you provide (via media queries and, optionally, image formats) and picks the first source that matches. If none match, it falls back to the image inside the img tag. This setup lets you deliver, for example, a wide, cropped image for desktops, a differently cropped image for mobile, and even a WebP or AVIF version for browsers that support it, while keeping a safe JPEG/PNG fallback. Why this works best: it keeps the content accessible and semantic because the actual image is still the img element with alt text, while the source elements handle which file to load under which conditions. It also reduces bandwidth on mobile by loading a smaller or more efficient image when appropriate, and it supports art direction (choosing different crops) in addition to different formats. A quick illustration in markup form: <picture> <source media="(min-width: 800px)" srcset="images/hero-wide.webp" type="image/webp"> <source media="(min-width: 400px)" srcset="images/hero-med.jpg"> <img src="images/hero-small.jpg" alt="Hero image"> </picture> Other options won’t adapt to screen size or quality in the same robust way: a single fixed src stays the same no matter the device; CSS background-images are decorative and not ideal for content images or accessibility; a link tag isn’t used to render images in the document.

When you want to serve different image sources based on how big the screen is or how dense the display is, use the picture element with multiple source elements. The browser tests the conditions you provide (via media queries and, optionally, image formats) and picks the first source that matches. If none match, it falls back to the image inside the img tag. This setup lets you deliver, for example, a wide, cropped image for desktops, a differently cropped image for mobile, and even a WebP or AVIF version for browsers that support it, while keeping a safe JPEG/PNG fallback.

Why this works best: it keeps the content accessible and semantic because the actual image is still the img element with alt text, while the source elements handle which file to load under which conditions. It also reduces bandwidth on mobile by loading a smaller or more efficient image when appropriate, and it supports art direction (choosing different crops) in addition to different formats.

A quick illustration in markup form:

Other options won’t adapt to screen size or quality in the same robust way: a single fixed src stays the same no matter the device; CSS background-images are decorative and not ideal for content images or accessibility; a link tag isn’t used to render images in the document.