The <picture> Element
As defined in the HTML Living Standard, the <picture> element is a container used to provide multiple versions of an image, allowing the browser to choose the most appropriate one based on screen size, resolution, or format support.
(Resize your browser window to see the image change.)
<picture>
<source media="(min-width: 800px)" srcset="desktop.jpg">
<source media="(min-width: 400px)" srcset="tablet.jpg">
<img src="mobile.jpg" alt="Description of the image">
</picture>Why Use <picture>?
Unlike the standard <img> tag with srcset, the <picture> element allows for Art Direction.
- Art Direction: Changing the image entirely (e.g., cropping a wide landscape to a tight portrait for mobile) to maintain visual impact.
- Format Switching: Providing a modern format like AVIF or WebP, with a JPEG fallback for older browsers.
WCAG Principle: Robustness & Perceivability
Success Criterion 1.1.1 (Level A): The <picture> element itself is a wrapper. The actual accessibility (the alt text) must be placed on the nested <img> element. If the image is missing the alt attribute, the entire component becomes inaccessible to screen reader users.
Performance Impact
By using <picture>, you prevent the browser from downloading unnecessarily large images on small devices, which directly improves Core Web Vitals (LCP) and ensures a better experience for users on limited data plans.