HTML <picture>
Element
Example
Display different images based on different screen sizes. If no match is found or the browser does not support the picture
attribute, the img
element is used:
<picture>
<source media="(min-width: 650px)" srcset="demo1.jpg">
<source media="(min-width: 465px)" srcset="demo2.jpg">
<img decoding="async" src="img_girl.jpg">
</picture>
Definition
The picture
element allows us to display different images on different devices, typically used for responsive design.
HTML5 introduced the <picture>
element, which makes image resource adjustment more flexible.
The <picture>
element contains zero or more <source>
elements and an <img>
element. Each <source>
element matches different devices and references different image sources. If no match is found, the URL in the src
attribute of the <img>
element is chosen.
Note: The <img>
element is placed last within the <picture>
element. If the browser does not support this attribute, it will display the image from the <img>
element.
Browser Support
The numbers in the table indicate the first browser version that supports the element.
Element | |||||
---|---|---|---|---|---|
<picture> |
38.0 | 13.0 | 38.0 | 9.1 | 25.0 |
Differences Between HTML 4.01 and HTML5
The picture
attribute is newly defined in HTML5.
Global Attributes
The <picture>
tag supports HTML's global attributes.
Event Attributes
The <picture>
tag supports HTML's event attributes.