picture

Summary

Control which image resource a user agent presents to a user, based on media query and/or support for a particular image format.

Overview Table

DOM Interface: HTMLPictureElement

The picture element (<picture>) addresses use cases that are left unaddressed by the srcset attribute, the most important being art direction.

Other use cases, such as matching media features and media types and matching on supported image formats, are also addressed by this element.

Attributes

This element supports the HTML5 global attributes.

Examples

Art direction use case:: This example shows the basic usage of the picture element for responsive images and art direction.

<picture>
  <source media="(min-width: 650px)" srcset="images/kitten-large.png">
  <source media="(min-width: 465px)" srcset="images/kitten-medium.png">
  <!-- img tag for browsers that do not support picture element -->
  <img src="images/kitten-small.png" alt="a cute kitten">
</picture>

View live example

Different image types use case: Browsers that support WebP get a WebP image; other browsers get JPG.

<picture>
  <source
    srcset="opera.webp"
    type="image/webp">
    <img
      src="opera.jpg" alt="The Oslo Opera House">
</picture>

High-DPI images & art direction use case: For browser windows with a width of 1024 CSS pixels and wider, a full-shot photo is used; smaller browser windows get a close-up photo. In addition, these photos are served as high-resolution images to browsers on devices with high-DPI screens; other browsers get a normal image.

<picture>
  <source
    media="(min-width: 1024px)"
    srcset="opera-fullshot-1x.jpg 1x, opera-fullshot-2x.jpg 2x, opera-fullshot-3x.jpg 3x">
  <img
    src="opera-closeup-1x.jpg" alt="The Oslo Opera House"
   srcset="opera-closeup-2x.jpg 2x, opera-closeup-3x.jpg 3x">
</picture>

Changing image sizes & art direction use case: For browser windows with a width of 1280 CSS pixels and wider, a full-shot photo with a width of 50% of the viewport width is used; for browser windows with a width of 640-1279 CSS pixels, a photo with a width of 60% of the viewport width is used; for less wide browser windows, a photo with a width that is equal to the full viewport width is used. In each case, the browser picks the optional image from a selection of images with widths of 200px, 400px, 800px and 1200px, keeping in mind image width and screen DPI.

<picture>
  <source
    media="(min-width: 1280px)"
    sizes="50vw"
    srcset="opera-fullshot-200.jpg 200w, opera-fullshot-400.jpg 400w, opera-fullshot-800.jpg 800w, opera-fullshot-1200.jpg 1200w">
  <img
    src="opera-fallback.jpg"
    alt="The Oslo Opera House"
    sizes="(min-width: 640px) 60vw, 100vw"
    srcset="opera-closeup-200.jpg 200w, opera-closeup-400.jpg 400w, opera-closeup-800.jpg 800w, opera-closeup-1200.jpg 1200w">
</picture>

Usage

 The picture element is not a general replacement for the img element. When there is only a single image source, authors should use <img> as usual.

The picture element requires <source> nested as a child.

The picture element requires <img> nested as the last child; without the img element, <picture> will be ignored. This requirement ensures maximum accessibility and browser backwards compatibility.

For accessibility, place alternative text for all images in the alt attribute of the img element.

Related specifications

RICG: Superseded
WHATWG: Living Standard

Attributions

This content was originally published on DevOpera, Opera's Developer Network. .