srcset

The srcset attribute lists multiple versions of the same image at different widths, letting the browser choose the best one for the visitor's actual screen — the core mechanism behind responsive images.

Syntax

<img src="fallback.jpg" srcset="small.jpg 480w, medium.jpg 800w, large.jpg 1200w" alt="...">

Basic Example

<img
    src="thumbnail-800.jpg"
    srcset="thumbnail-400.jpg 400w, thumbnail-800.jpg 800w, thumbnail-1600.jpg 1600w"
    sizes="50vw"
    alt="Course thumbnail"
>

Browser output: only ever one image is actually downloaded and shown — but which one depends on the visitor's device, invisible in the rendered page itself.

How It Works

1. Each entry in srcset pairs an image URL with a width descriptor (like 800w), stating the image file's real, actual pixel width.
2. The browser combines this with the sizes attribute (how large the image will display) and the device's pixel density to pick the smallest sufficient file.
3. src remains as a required fallback for older browsers that don't understand srcset at all.

Important Attributes

Real-World Example

<img
    src="student-project-800.jpg"
    srcset="
        student-project-400.jpg 400w,
        student-project-800.jpg 800w,
        student-project-1200.jpg 1200w
    "
    sizes="(max-width: 700px) 100vw, 700px"
    alt="A student's completed portfolio website project"
>

On a phone narrower than 700px, the image displays at full viewport width; on any wider screen, it's capped at 700px — the browser uses that information to pick the right file from srcset.

Common Mistakes

• Using x descriptors (pixel-density, like 2x) and w descriptors (width) inconsistently within the same srcset — they're two different systems and shouldn't be mixed together
• Forgetting the fallback src attribute

Best Practices

• Provide at least 3 meaningfully different widths for any large, important image
• Keep sizes accurate to how the image actually renders in your CSS layout

Accessibility Considerations

No direct accessibility effect — alt still applies to whichever image file is actually chosen and displayed.

SEO Considerations

Smaller, appropriately-sized downloads directly improve page-speed metrics that search engines factor into ranking, particularly for mobile search results.

Browser & Modern HTML Notes

Universally supported in modern browsers; older browsers that don't recognize srcset simply fall back to the plain src attribute, so it degrades gracefully.

Mini Practice

1. Write a srcset with 4 width-based candidates for a product photo.
2. Explain the difference between a w descriptor and an x descriptor in your own words.

Related HTML Notes

• responsive-images
• picture-element