The <picture> Element
As defined in the HTML Living Standard, the <picture> element is a container which provides multiple sources for its contained <img> element to allow different images to be shown depending on variables such as the viewport size or supported image formats.
(Resize your browser to see the image change based on the viewport width.)
<picture>
<source srcset="image.webp" type="image/webp">
<source srcset="image.jpg" type="image/jpeg">
<img src="image.jpg" alt="Description of the image">
</picture>
View HTML Living Standard: The picture element
Technical Structure
- Source Elements: One or more
<source>elements provide alternative versions of the image. The browser chooses the first source that matches the current environment. - The Img Element: Exactly one
<img>element must be present as the last child. This is the element that actually renders; the<picture>tag simply provides the data for thesrcandsrcsetattributes of this image. - Art Direction: Use the
mediaattribute on sources to provide completely different versions of an image (e.g., a landscape photo for desktop and a cropped portrait version for mobile).
WCAG Requirement: Non-text Content
Success Criterion 1.1.1 (Level A): All non-text content that is presented to the user has a text alternative that serves the equivalent purpose.
Because the <picture> tag is just a wrapper, the alt attribute must be placed on the inner <img> tag. Even if the visual image changes based on the viewport, the semantic meaning (the alternative text) usually remains the same. If the different images convey different information, ensure the alt text is broad enough to cover all variations.
Modern Format Support
A major use for <picture> is serving modern, highly-compressed formats like AVIF or WebP while maintaining a fallback for older browsers.
<picture>
<!-- Serve the most efficient format first -->
<source srcset="photo.avif" type="image/avif">
<source srcset="photo.webp" type="image/webp">
<!-- Fallback to standard JPG -->
<img src="photo.jpg" alt="A golden sunset over the mountains">
</picture>
A11y Tip: Responsive Performance
By providing smaller, optimized images for mobile users via the <picture> tag, you reduce data usage and improve page load speed. This supports users with cognitive disabilities or vestibular disorders who may be frustrated or triggered by slow-loading, "jumping" content layouts.