HTML <picture>Element

Examples

Display different images according to different screen sizes; if no match is found or the browser does not support the picture element, the img element is used:

<picture> <source media="(min-width: 650px)" srcset="demo1.jpg"> <source media="(min-width: 465px)" srcset="demo2.jpg"> <img src="img_girl.jpg"> </picture>

Try it Yourself »

Definition

The picture element allows us to display different images on different devices, and is generally 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 one <img> element. Each <source> element matches a different device and references a different image source. If there is no match, the URL in the src attribute of the <img> element is selected.

Note:<img>The element is placed after the last<picture>element; if the browser does not support this attribute, the image of the <img> element is displayed.

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

Differences between HTML 4.01 and HTML5

The <picture> element is newly defined in HTML5.

Global Attributes

The <picture> tag supportsthe HTML Global Attributes.。

Event Attributes

The <picture> tag supportsthe HTML Event Attributes.。

Other Extensions