HTML <picture> Tag
Example
How to use the <picture> tag:
<picture>
<source media="(min-width:650px)" srcset="img_pink_flowers.jpg">
<source media="(min-width:465px)" srcset="img_white_flower.jpg">
<img
src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;">
</picture>
Try it Yourself »
Definition and Usage
The <picture> tag gives web developers more flexibility in specifying
image resources.
The most common use of the <picture> element will be for art direction in
responsive designs. Instead of having one image that is scaled up or down based
on the viewport width, multiple images can be designed to more nicely fill the
browser viewport.
The <picture> element contains two tags: one or more
<source> tags and
one <img> tag.
The browser will look for the first <source> element where the media query
matches the current viewport width, and then it will display the proper image
(specified in the srcset attribute). The <img> element is required as the last
child of the <picture> element, as a
fallback option if none of the source tags matches.
Tip: The <picture> element works
"similar" to <video> and <audio>. You
set up different sources, and the first source that fits the preferences is the
one being used.
Browser Support
The numbers in the table specify the first browser version that fully supports the element.
| Element | |||||
|---|---|---|---|---|---|
| <picture> | 38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Global Attributes
The <picture> tag also supports the Global Attributes in HTML.
Event Attributes
The <picture> tag also supports the Event Attributes in HTML.
Related Pages
HTML Tutorial: HTML <picture> Element
CSS Tutorial: CSS Responsive Design - Images
