HTML Tags
Advertisements

HTML5 <picture> Tag

Topic: HTML5 Tags ReferencePrev|Next

Description

The <picture> element is used for art direction in responsive designs.

The <picture> element contains zero or more <source> elements and one <img> element to show different versions of an image depending on the device screen sizes.

The following table summarizes the usages context and the version history of this tag.

Placement: Inline
Content: Zero or more <source> elements, followed by one <img> element
Start/End Tag: Start tag: required, End tag: required
Version: New in HTML5

Syntax

The basic syntax of the <picture> tag is given with:

<picture>
    <img src="URL" alt="text">
</picture>

The example below shows the <picture> tag in action.

<picture>
    <source media="(min-width: 1024px)" srcset="images/banner-large.png">
    <source media="(max-width: 768px)" srcset="images/banner-small.png">
    <img src="images/banner.png" alt="Banner">
</picture>

Tip: The browser will consider each child <source> element and choose the best match among them. If no matches are found—or the browser doesn't support the <picture> element—the URL of the <img> element's src attribute is selected.


Tag-Specific Attributes

The <picture> tag doesn't have any specific attribute.


Global Attributes

Like all other HTML tags, the <picture> tag supports the global attributes in HTML5.


Event Attributes

The <picture> tag also supports the event attributes in HTML5.


Browser Compatibility

The <picture> tag is supported in all major modern browsers.

Browsers Icon

Basic Support—

  • Firefox 38+
  • Google Chrome 38+
  • Edge 13+
  • Apple Safari 9.1+
  • Opera 25+

Further Reading

See tutorial on: HTML Images.

Related tags: <img>, <source>.

Advertisements
Bootstrap UI Design Templates