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

HTML

<picture>

    <source srcset="images/color.svg"> 

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

</picture>

Result

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

Support Us