HTML <picture> Element
The HTML <picture> element provides multiple image sources so the browser can choose an appropriate image based on conditions such as screen size, resolution, or supported image format.
Syntax
<picture>
<source media="(min-width: 800px)" srcset="large.jpg">
<source media="(min-width: 500px)" srcset="medium.jpg">
<img src="small.jpg" alt="Description of image">
</picture>The <picture> element requires both an opening and closing tag. It can contain one or more <source> elements followed by an <img> element, which provides the image that is ultimately displayed and serves as the fallback source.
Attributes
The <picture> element supports the global HTML attributes. It does not have any element-specific attributes.
Example
This example uses the <picture> element to provide different images for smaller and larger browser widths. Resize the editor window to see which image source the browser selects.
Usage Notes
The <picture> element is useful when different image files should be used under different conditions. This can include supplying differently cropped images for different screen sizes, choosing images based on media queries, or providing alternative image formats.
Each <source> element can use attributes such as media, srcset, and type to describe when its image source should be used. The browser evaluates the sources in order and uses the first suitable match.
An <img> element is required as the final child of <picture>. It supplies the displayed image when none of the preceding <source> elements match and also provides important attributes such as alt.
Use <picture> when the browser needs to choose between substantially different image resources. For simpler responsive images where only the resolution or size of the same image changes, the srcset and sizes attributes on <img> may be sufficient.
Accessibility
The alternative text for a <picture> is provided by the required alt attribute on its child <img> element. The alternative text should describe the purpose or meaningful content of the image rather than the particular image file selected by the browser.
When different image sources use different crops or compositions, make sure the important information represented by the image remains available in every version.
Browser Support
Baseline: Widely available indicates a feature has been supported by core browsers for at least 30 months. At this stage, the feature is considered stable and safe for most websites to use without needing to worry about compatibility issues or fallbacks, as it is supported by the vast majority of users' devices and browser versions.
For detailed browser compatibility information, see Can I Use: HTML <picture> Element .
Related Elements
The <picture> element is closely related to the <img> element that displays the selected image and the <source> element that provides alternative image resources.