<picture> tag in HTML

The <picture> tag is used to gives an approach towards image resource loading for more flexibility in specifying image resources.

Important Description

  • Used one or more <source> tags and one <img> tag inside the <picture> element.
  • Open and close tag required of <picture>.
  • The <img> element is used to provide backward compatibility for browsers that do not support the <picture> element, or if none of the <source> tags matched.

Example of <picture> tag

Resize the browser windows to see the different results of <picture> element.

Result Look Like


<picture> Tag Browser Support

IE12 and earlier or Safari 9.0 and earlier both are not supported the <picture> element.

Element Chrome Edge Firefox Safari Opera
<picture> Yes Yes Yes Yes Yes
version 38.0 13.0 38.0 9.1 25.0

Global Attributes

Event Attributes


Attribute Value Description
media media Defines that the media of element
type MIME_type Defines the resource URL of element

Advertise With Us

We offer sponsored posts and guest posts with do-follow links, back-links, and other advertising services, To advertise email us at ""

© 2021 GDATAMART.COM (All Rights Reserved)