HTML Picture Element

Understanding the HTML <picture> Element

The HTML <picture> element allows you to provide multiple image sources so the browser can select an image based on conditions such as screen size or supported image format.

Unlike a basic responsive image that provides different sizes of the same image, <picture> can also provide differently composed images for different displays, a technique known as art direction.

Picture Element Syntax

The <picture> element contains one or more <source> elements followed by an <img> element.

<picture>
  <source media="(min-width: 900px)" srcset="/img/images/picture-wide.png">
  <source media="(min-width: 600px)" srcset="/img/images/picture-medium.png">
  <img src="/img/images/picture-small.png"
       alt="HTML picture element example">
</picture>

The browser examines the <source> elements in order and uses the first source whose conditions match. If none match, the <img> element provides the fallback image.

The <source> Element

The <source> element defines an alternative image resource within <picture>. Its srcset attribute specifies the image to use, while attributes such as media and type can define when that source is appropriate.

<source media="(min-width: 900px)"
        srcset="/img/images/picture-wide.png">

The <source> element is an empty element and does not use a closing tag.

The <img> Element and Fallback

An <img> element is required inside <picture>. It provides the image that is displayed when none of the preceding <source> elements match.

<picture>
  <source media="(min-width: 900px)"
          srcset="/img/images/picture-wide.png">
  <img src="/img/images/picture-small.png"
       alt="HTML picture element example">
</picture>

The <img> element also supplies the alternative text for the image. The <source> elements do not use an alt attribute.

Art Direction

Art direction uses different image compositions for different display conditions rather than simply resizing the same image. For example, a wide image may work well on a desktop screen while a portrait image may provide a better composition on a narrow mobile screen.

The <picture> element is especially useful for this because each <source> can reference a completely different image.

<picture>
  <source media="(min-width: 900px)"
          srcset="/img/images/picture-wide.png">
  <source media="(min-width: 600px)"
          srcset="/img/images/picture-medium.png">
  <img src="/img/images/picture-small.png"
       alt="HTML picture element example">
</picture>

Using Media Conditions

The media attribute accepts a media condition that tells the browser when a particular <source> should be considered.

<source media="(min-width: 900px)"
        srcset="/img/images/picture-wide.png">

In this example, the source is used when the viewport is at least 900 pixels wide. Because the browser evaluates the sources in order, their order should match the logic of the media conditions being used.

Providing Different Image Formats

The <picture> element can also provide alternative image formats. The type attribute identifies the MIME type of each source so the browser can select a format it supports.

<picture>
  <source srcset="/img/images/image-600x400.avif"
          type="image/avif">
  <source srcset="/img/images/image-600x400.webp"
          type="image/webp">
  <img src="/img/images/image-600x400.png"
       alt="HTML image example"
       width="600"
       height="400">
</picture>

The sources should generally be ordered with the preferred format first, followed by other alternatives and finally the <img> fallback.

HTML Picture Element Example

The following example uses your wide, medium, and portrait images to demonstrate art direction. Resize the editor window to see the browser select a different image as the available width changes.

Picture Element Best Practices

• Use <picture> when different image compositions or formats provide a real benefit.
• Use <source> elements to define alternative image resources and the conditions under which they should be used.
• Always include an <img> element as the final child of <picture>.
• Place meaningful alternative text on the <img> element.
• Order <source> elements carefully because the browser evaluates them in sequence.
• Use appropriately sized and optimized image files rather than unnecessarily large images.

Summary

The HTML <picture> element provides multiple image sources and allows the browser to select the most appropriate resource. It is particularly useful for art direction, media-based image selection, and providing modern image formats with a fallback. The <source> elements define the alternatives, while the required <img> element provides the fallback image and alternative text.