HTML <picture> Tag

<picture>
  <source media="(min-width:650px)" srcset="computer.png">
  <source media="(min-width:465px)" srcset="clock.png">
  <img src="mobile.png" alt="mobile" style="width:auto;">
</picture>

Meaning

The <picture> element control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Note:

• The picture element is not a general replacement for the <img> element. When there is only a single image source, authors should use <img> as usual.
• The picture element requires <img> nested as the last child; don't ommit <img> element it will render if media query doesn't match.

The <img> element serves two purposes:

1. It describes the size and other attributes of the image and its presentation.
2. It provides a fallback in case none of the offered <source> elements are able to provide a usable image.

Version: HTML5

Standard Syntax

<picture>
  <source media="mediaQuery" srcset="URL">
  <img src="URL" alt="text">
</picture>

Browser Support

Status

Global Attributes

<picture> element also supports the Global Attributes in HTML.

Event Attributes

<picture> element also supports the Event Attributes in HTML.