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!

☕ Buy a Coffee

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

Editor

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