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.

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.

HTML anchor Tag HTML abbr Tag HTML acronym Tag HTML address Tag HTML applet Tag HTML area Tag HTML article Tag HTML aside Tag HTML audio Tag HTML b Tag HTML base Tag HTML basefont Tag HTML bdi Tag HTML bdo Tag HTML big Tag HTML blockquote Tag HTML body Tag HTML br Tag HTML Button Tag HTML Canvas Tag HTML Caption Tag HTML Center Tag HTML Cite Tag HTML Code Tag HTML Col Tag HTML colgroup Tag HTML comment Tag HTML data Tag HTML datalist Tag HTML dd Tag HTML del Tag HTML details Tag HTML dfn Tag HTML dialog Tag HTML dir Tag HTML div Tag HTML dl Tag HTML Doctype Tag HTML dt Tag HTML em Tag HTML embed Tag HTML fieldset Tag HTML figcaption Tag HTML figure Tag HTML font Tag HTML footer Tag HTML form Tag HTML frame Tag HTML frameset Tag HTML Heading Tags HTML head Tag HTML header Tag HTML hr Tag HTML html Tag HTML i Tag HTML iframe Tag HTML img Tag HTML input Tag HTML ins Tag HTML kbd Tag HTML label Tag HTML legend Tag HTML li Tag HTML link Tag HTML main Tag HTML map Tag HTML mark Tag HTML meta Tag HTML meter Tag HTML nav Tag HTML noframes Tag HTML noscript Tag HTML object Tag HTML ol Tag HTML optgroup Tag HTML option Tag HTML output Tag HTML p Tag HTML param Tag HTML picture Tag HTML pre Tag HTML progress Tag HTML q Tag HTML rp Tag