<picture>Baseline · Widely available

The <picture> element is used for art direction in responsive images, where a different image is displayed based on the <source> element.

Supported in all major browsers for at least 30 months — safe to use without fallbacks. Baseline since Mar 21, 2016. Widely available since Sep 21, 2018.

How to use ↓Compare browsers

Browser support

DesktopChrome

1–37Not supported

38+Supportedsince Oct 7, 2014

Current: 155

Edge

12–12Not supported

13+Supportedsince Nov 12, 2015

Current: 154

Firefox

1–37Not supported

38+Supportedsince May 12, 2015

Current: 157

Safari

1–9Not supported

9.1+Supportedsince Mar 21, 2016

Current: 27

MobileChrome Android

18–37Not supported

38+Supportedsince Oct 8, 2014

Current: 155

Firefox Android

4–37Not supported

38+Supportedsince May 12, 2015

Current: 157

Safari iOS

1–9Not supported

9.3+Supportedsince Mar 21, 2016

Current: 27

How to use

This feature is Baseline widely available — use it freely, no fallback needed.

Example

HTML

<picture>
  <source type="image/avif" srcset="photo.avif">
  <source type="image/webp" srcset="photo.webp">
  <img src="photo.jpg" alt="…" width="800" height="600">
</picture>

Feature detection

JS · check before using

const el = document.createElement("picture");
if (!(el instanceof HTMLUnknownElement)) {
  // <picture> is supported
}

Documentation (MDN)

Specification

html.spec.whatwg.org#the-picture-element ↗

Usage share

caniuse.com/picture ↗

Sub-features

Support for each part of the feature (2). The overall table above shows when the whole feature works.

Sub-feature	Chrome	Edge	Firefox	Safari	Chrome Android	Firefox Android	Safari iOS
HTMLPictureElement	38	13	38	9.1	38	38	9.3
picture	38	13	38	9.1	38	38	9.3