HTML <picture> Tag

If this site has been useful, we’d love your support! Running this site takes time and resources, and every small contribution helps us keep creating valuable content. Consider buying us a coffee to keep things going strong!

Description

The <picture> HTML element is a container for storing several <source> elements that support the <img> element. This allows you to specify different images based on screen size, pixel density, image format and other parameters. Here are a few areas of application for the <picture> tag:
1. for retina screens, you can display a larger image;
2. display drawings of different sizes for mobile and desktop devices;
3. display images of different proportions, taking into account the orientation of the device;
4. display the image in vector format SVG, and for browsers that do not support it, show PNG.

Properties

Permitted Parents
Any element that allows embedded content
Content
Zero or more <source> elements, followed by one <img> element, optionally intermixed with script-supporting elements
Start/End Tags
Start tag: required, End tag: required

Example

<picture>
<source srcset="images/color.svg">
<img src="images/color.png" width="256" height="256" alt="Color">
</picture>

Attributes

None

Global Attributes

The <tr> tag also supports the Global Attributes in HTML5

Event Attributes

None

Browser Support

The following table will show you the current browser support for the HTML <picture> tag.

Desktop
Edge Chrome Firefox Opera Safari
133838259.1
Tablets / Mobile
Chrome Firefox Opera Safari Samsung Webview
3838259.3338

Last updated by CSSPortal on: 30th September 2023