Easy Tutorial
❮ Tag Tr Att Script Async ❯

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.

❮ Tag Tr Att Script Async ❯