HTML <picture> Tag

❮ Previous Reference Next ❯


  <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;">


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.


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

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

Browser Support


Global Attributes

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

Event Attributes

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

Related Tags:

<audio>, <embed>, <iframe>, <img>, <map>, <object>, <param>, <portal>, <source>, <track> and <video>
❮ Previous Reference Next ❯