The HTML <picture> tag

Definition and Usage

<picture> tag makes web developers more flexible when specifying image resources.

<picture> The most common use of the element is in responsive design for artistic direction. You can design multiple images to better fill the browser viewport, rather than letting one image scale up or down proportionally based on the viewport width.

<picture> element contains two tags: one or more <source> tag and a <img> tag.

The browser will look for the first <source> element that matches the media query with the current viewport width, and then it will display the correct image (specified in the srcset attribute). The <img> element acts as <picture> The last child element of the element is required and is used as a fallback option when no source tag matches.

Tip:<picture> elements work in the same way as <video> and <audio> Similar. You can set different sources, and the first source suitable for the preference will be used.

See also:

HTML Tutorial:HTML <picture> Element

CSS Tutorial:CSS Responsive Design - Images

Example

<picture> Usage Method of the Tag:

<picture>
  <source media="(min-width:650px)" srcset="flowers-1.jpg">
  <source media="(min-width:465px)" srcset="flowers-2.jpg">
  <img src="flowers-3.jpg" alt="Flowers" style="width:auto;">
</picture>

Try It Yourself

Global Attributes

<picture> The tag also supports Global Attributes in HTML.

Event Attributes

<picture> The tag also supports Event Attributes in HTML.

Browser Support

The numbers in the table indicate the first browser version to fully support this tag.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
38.0 13.0 38.0 9.1 25.0