HTMLPictureElement

This is an experimental technology
Check the Browser compatibility table carefully before using this in production.

The HTMLPictureElement interface represents a <picture> HTML element. It doesn't implement specific properties or methods.

  <div id="interfaceDiagram" style="display: inline-block; position: relative; width: 100%; padding-bottom: 20%; vertical-align: middle; overflow: hidden;"><svg style="display: inline-block; position: absolute; top: 0; left: 0;" viewbox="-50 0 600 120" preserveAspectRatio="xMinYMin meet"><a xlink:href="/docs/Web/API/EventTarget" target="_top"><rect x="1" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="56" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">EventTarget</text></a><polyline points="111,25  121,20  121,30  111,25" stroke="#D4DDE4" fill="none"/><line x1="121" y1="25" x2="151" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Node" target="_top"><rect x="151" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="188.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Node</text></a><polyline points="226,25  236,20  236,30  226,25" stroke="#D4DDE4" fill="none"/><line x1="236" y1="25" x2="266" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/Element" target="_top"><rect x="266" y="1" width="75" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="303.5" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">Element</text></a><polyline points="341,25  351,20  351,30  341,25" stroke="#D4DDE4" fill="none"/><line x1="351" y1="25" x2="381" y2="25" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLElement" target="_top"><rect x="381" y="1" width="110" height="50" fill="#fff" stroke="#D4DDE4" stroke-width="2px" /><text  x="436" y="30" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLElement</text></a><polyline points="491,25  501,20  501,30  491,25" stroke="#D4DDE4" fill="none"/><line x1="501" y1="25" x2="509" y2="25" stroke="#D4DDE4"/><line x1="509" y1="25" x2="509" y2="90" stroke="#D4DDE4"/><line x1="509" y1="90" x2="492" y2="90" stroke="#D4DDE4"/><a xlink:href="/docs/Web/API/HTMLPictureElement" target="_top"><rect x="311" y="65" width="180" height="50" fill="#F4F7F8" stroke="#D4DDE4" stroke-width="2px" /><text  x="401" y="94" font-size="12px" font-family="Consolas,Monaco,Andale Mono,monospace" fill="#4D4E53" text-anchor="middle" alignment-baseline="middle">HTMLPictureElement</text></a></svg></div>

  a:hover text { fill: #0095DD; pointer-events: all;}

Properties

No specific property, but inherits properties from its parent, HTMLElement.

Methods

No specific method, but inherits methods from its parent, HTMLElement.

Specifications

Specification	Status	Comment
HTML Living Standard The definition of 'HTMLPictureElement' in that specification.	Living Standard	Initial definition

Browser compatibility

	Desktop						Mobile
	Chrome	Edge	Firefox	Internet Explorer	Opera	Safari	Android webview	Chrome for Android	Firefox for Android	Opera for Android	Safari on iOS	Samsung Internet
`HTMLPictureElement` Experimental	Chrome Full support 38	Edge Full support 13	Firefox Full support 38 Full support 38 No support 32 — 52 Disabled Disabled From version 32 until version 52 (exclusive): this feature is behind the `dom.image.picture.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	IE No support No	Opera Full support 25	Safari Full support 9.1	WebView Android Full support 38	Chrome Android Full support 38	Firefox Android Full support 38 Full support 38 No support 32 — 52 Disabled Disabled From version 32 until version 52 (exclusive): this feature is behind the `dom.image.picture.enabled` preference (needs to be set to `true`). To change preferences in Firefox, visit about:config.	Opera Android Full support 25	Safari iOS Full support 9.3	Samsung Internet Android Full support 3.0

Legend

Full support: Full support
No support: No support
Experimental. Expect behavior to change in the future.: Experimental. Expect behavior to change in the future.
User must explicitly enable this feature.: User must explicitly enable this feature.

Properties

Methods

Specifications

Browser compatibility

Legend

See also