HTML picture Tag

HTML picture Tag defines more than one images of different sizes, for same place on a page using source tag and img tag, to increase the responsiveness of website.

Table of Contents

• Syntax of HTML picture Tag
• Usage of HTML picture Tag
• Example of HTML picture Tag
• Browser Support for HTML picture Tag
• Global Attributes Support in HTML picture Tag
• Event Attributes Support in HTML picture Tag
• More Tags

Syntax of HTML picture Tag

The Syntax of HTML picture Tag is shown below, It has both starting tag and ending tag.

<picture>
</picture>

Usage of HTML picture Tag

HTML picture Tag is used to make responsive web pages. This is done by using one or more source tag and one img tag inside the picture tag.

Instead of changing the size of same picture, different images of different sizes are used, depending on the size of viewport or size of screen. This increase the responsiveness of website.

The picture tag also works with the video tag and audio tag.

srcset attribute is used to define URL of content inside source tag.

Example of HTML picture Tag

Simple example of HTML picture Tag is given below.

<picture>
 <source media="(min-width:500px)" srcset="car-small.jpg">
 <source media="(min-width:1000px)" srcset="car-medium.jpg">
 <source media="(min-width:1200px)" srcset="car-large.jpg">
 <img src="car.jpg" style="width:100%;max-width:450px;">
</picture>

In above example we have used picture tag with three source tags and one img tag.

The browser will display the image defined using source tag, where the screen size matches the specified media query. If viewport size isn't matching any media query of any source tag, then browser will display the image defined using img tag.

For example: If screen size of your device is 800px, then the image defined inside first source tag will be displayed. Similarly if screen size is above or equal to 1000px and less than 1200px then image defined inside second source tag will be displayed.

If viewport width is less than 500px then image define using img tag will be displayed.

Browser Support for HTML picture Tag

HTML picture Tag is supported by all major browsers which include Chrome (38.0 or higher), Opera (25.0 or higher), Firefox (38.0 or higher), Edge (13.0 or higher) and Safari (9.1 or higher).

Global Attributes Support in HTML picture Tag

The HTML picture Tag supports all Global Attributes.

Event Attributes Support in HTML picture Tag

The HTML picture Tag supports all Event Attributes.