HTML <picture> Tag
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 | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
|
13 | 38 | 38 | 25 | 9.1 |
Tablets / Mobile | |||||
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
38 | 38 | 25 | 9.3 | 3 | 38 |
Last updated by CSSPortal on: 30th September 2023