<picture> tag is a container for multiple images sources. It will selects one of the images depending on the conditions.
<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.
<picture> element specifies multiple image sources to display.
This element can display responsive images that adjust based on the device viewport.
The <img> element is displayed when the browser does not find a proper source.
<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
<picture> element itself has no attributes, but it does accept global attributes.
The following are commonly used.
|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.|
|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: