The <picture> tag is a container for multiple images sources.
The browser will select an image depending on certain conditions.
A <picture> element with three image sources of different size. Resizing the browser will display the optimal image, effectively creating a responsive image.
<picture>
<source media="(max-width: 520px)" srcset="/img/html/vangogh-sm.jpg">
<source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
Note: The media attribute queries the browser to determine the best image source.
The <picture> element specifies multiple image sources to display.
Effectively, this creates responsive images that adjust to the device details.
The <picture> tag contains <source> and <img> tags.
The <img> element will display when the browser does not find a proper source.
A <picture> with a <source> element that is specific for printing.
When printed this page will use a black and white image.
<picture>
<source media="(max-width: 414px)" srcset="/img/html/vangogh-sm.jpg">
<source media="(max-width: 768px)" srcset="/img/html/vangogh.jpg">
<source media="print" srcset="/img/html/vangogh-bw.jpg">
<img src="/img/html/vangogh-lg.jpg" alt="Vincent Van Gogh">
</picture>
The printed output with a black-and-white image.
media - defines the browser and viewport condition for the image to be chosen.
srcset - the URL of the image to be displayed
The <picture> element itself has no attributes, but it does accept global attributes.
The following are commonly used.
| Attribute | Value | Description |
|---|---|---|
| id | identifier | Defines a unique identifier for the picture. |
| class | classnames | Sets one or more CSS classes to be applied to the picture. |
| style | CSS-styles | Sets the style for the picture. |
| data-* | value | Defines additional data that can be used by JavaScript. |
| hidden | hidden | Specifies whether the picture is hidden. |
| title | text | Sets a title that displays as a tooltip. |
For additional global attributes see our global attributes list.
These are some scenarios in which <picture> is appropriate:
For images that must be resized based on the device resolution.
To display images with optimal size and pixel density in each viewport size.
To prevent downloading large images on small devices, or viewing small images on large screens.
For art direction in which images are cropped, or display smaller versions, under certain conditions.
Tip: Most of these cases are advanced graphic scenarios where image quality matters.
In most other cases, regular <img> tags with CSS will suffice.
Here is when <picture> support started for each browser:
 Chrome
|
38.0 | Oct 2014 |
 Firefox
|
38.0 | May 2015 |
 IE/Edge
|
13.0 | Nov 2015 |
 Opera
|
25.0 | Oct 2014 |
 Safari
|
9.1 | Mar 2016 |
