<picture> tag in HTML

← Previous Next →

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

<picture> <source media="(max-width: 600px)" srcset="img/duck.jpg" /> <img src="duck-mallard.jpg" class="img-responsive" alt="duck" style="width:auto;" /> </picture>

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.

Global Attributes

• The <picture> tag supports all the Global Attributes in HTML.

Event Attributes

• The <picture> tag supports all the Event Attributes in HTML.

Attributes

← Previous Next →