Description

The HTML element <picture> is used to define art direction in responsive designs, which helps in defining different images for different screen or device sizes.

It can contain zero or more <source> elements, followed by one <img> element.

  • Each element <source> defines a different image for different screen sizes.
  • The element <img> becomes the default image to be displayed, which is displayed when none of the sources are matched.

The browser will consider all the <source> elements and tries to choose the best match, if none of them matched or the browser doesn't support <picture>, then the <img> element is displayed.

The below table summarizes its usage.

Usage Details
Placement It is displayed as an Inline element.
Contents Zero or more <source> elements, followed by one <img> element.
Tags Both the opening and closing tags are required.
Versions HTML 5

Syntax

Here is the basic syntax of the <picture> element.

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

Examples

Run this on IDE

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Example - HTML Element picture</title>
</head>
<body>
    <picture>
        <source media="(min-width: 1024px)" srcset="/assets/images/banner-large.png">
        <source media="(max-width: 768px)" srcset="/assets/images/banner-small.png">
        <img src="/assets/images/banner.png" alt="banner">
    </picture>
    <p><strong>Note:</strong> Resize the browser window to understand how the picture element actually works.</p>
</body>
</html>

Attributes

The following table shows the list of supported and unsupported attributes for the <picture> element.

Attribute Type Details
Element-Specific Attributes The tag <picture> doesn't have any element-specific attributes.
Global Attributes Like all other HTML tags, the tag <picture> supports the HTML Global Attributes.
Event Attributes The tag <picture> also supports the HTML Event Attributes.

Browser Compatibility

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

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

Related Links