<picture>

Overview

The <picture> element allows specifying multiple image sources to be displayed under different conditions. It ensures that the most appropriate image is served based on the user's device or the browser's viewport.

Specifically, the element can enclose one or multiple optional <source> elements and an <img> element. Browsers evaluate the <source> elements in a sequence, choosing the first suitable image. If none match or the browser lacks <picture> support, the image from the <img> tag is displayed as a fallback.

Examples and Usage

To understand the element's versatility and use cases, we'll observe a series of illustrative examples. These scenarios encompass responsive design considerations, format preferences, and adjustments for varying screen resolutions.

Providing Different Image Formats

Modern web development often requires the integration of various image formats, especially when aiming for optimal quality and compression.

<picture>
  <source srcset="example-image.avif" type="image/avif">
  <source srcset="example-image.webp" type="image/webp">
  <img src="fallback-image.jpg" alt="A descriptive alt text.">
</picture>

In the example above, the srcset attribute in the <source> element specifies the image's URL, while the type attribute states the image format. The src attribute in the <img> tag provides the default image if none of the sources match or if the browser doesn't support the newer formats. AVIF and WebP are modern formats that sometimes offer superior characteristics compared to traditional ones like JPEG. Not all browsers support these, hence the fallback in the <img> tag addresses compatibility.

Adapting to Different Viewport Sizes

The <picture> element can also aid in responsiveness. Let's go over the specifics shown in the example below.

<picture>
  <source srcset="landscape-image.png" media="(min-width: 600px)">
  <img src="portrait-image.png" alt="A scenic view.">
</picture>

The media attribute contains a condition, much like a media query. If the browser's viewport width is 600 pixels or more, it will display the landscape image. Otherwise, it defaults to the portrait image, which is more suited for narrower screens.

Addressing Different Pixel Densities

With high-resolution screens becoming common, the <picture> element can serve images based on device pixel density.

<picture>
  <source srcset="image-standard.png 1x, image-hd.png 2x" />
  <img src="image-default.png" alt="A descriptive alt text.">
</picture>

The x descriptor (like 1x, 2x) in the srcset attribute indicates pixel density. A 2x descriptor, for instance, would be suitable for displays with higher pixel density, like Retina screens.

It's worth noting that the above examples are illustrative and can be structured in various ways based on the specific needs of a website. Developers have the flexibility to use values other than px for the media attribute, such as em. Additionally, attributes like loading and decoding can be added to the <img> tag to further optimize image delivery. Elements within <picture> can also be nested differently depending on the use case.

Attribute Breakdown

The <picture> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.

Note: The attributes we discussed earlier are used within the elements nested inside the <picture> tag. They are not directly associated with the <picture> element itself.

Accessibility Aspects

When using the <picture> element, it's crucial to be aware of certain accessibility considerations:

• The <picture> element does not have a direct corresponding role in accessibility APIs.

• You can set the aria-hidden attribute on the <picture> element. This attribute indicates that the element and all of its descendants should be treated as a single, invisible, entity by assistive technologies.

• Always include an <img> element nested inside the <picture> element, with a relevant alt attribute. This attribute provides a text description of the image, aiding screen readers and other assistive tools.

Associated Elements

• <img>
• <source>

Additional Notes

• The <picture> element is not just a direct extension of the <img> element with srcset. While srcset offers varied sizes of the same image, the <picture> element can provide entirely different images, offering more nuanced control over the image displayed.

• Responsive designs may sometimes necessitate image cropping rather than just resizing. Different devices or orientations might benefit from differently cropped images to maintain aesthetic appeal. Make sure the alt attribute accurately describes the image, even if cropped versions are used.

• While the srcset and sizes attributes on the img element cater to many responsive design needs, the <picture> element steps in when a more granular approach is required. It enables developers to dictate exact conditions for image display.

• For more control over image positioning within its container, utilize the object-position and object-fit properties on the nested <img> element, not on the <picture> element itself. These properties adjust the image's position and resizing behavior within its frame.

Browser Compatibility

For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.

Useful Resources

Can I use HTML element: picture

The HTML Living Standard Specification: picture