HTML<picture>Tag: The HTML<picture> tag facilitates flexibility to the users in specifying image resources. And the most common use of the <picture> element will be for art direction in responsive designs. Instead of having one image that is scaled up or down based on the viewport width, multiple images can be designed to more nicely fill the browser viewport. The HTML picture element holds two different tags: one or more <source> tags and one <img> tag.
HTML<picture>Tag
This HTML picture tag supports both the global and the event attributes. The browser will use the attribute values to load the most appropriate image. The browser will use the first <source> element with a matching hint and ignore any following <source> tags.
Syntax: <picture> Text </picture>
The <source> element has the following attributes:
- srcset (required) – defines the URL of the image to show
- media – accepts any valid media query that would normally be defined in a CSS
- sizes – defines a single width descriptor, a single media query with width descriptor, or a comma-delimited list of media queries with a width descriptor
- type – defines the MIME type
The <img> element is required as the last child tag of the <picture> declaration block. 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.
Browser compatibility
The HTML<picture> tag is supported by different types of browsers.
- Chrome
- Firefox
- Opera
- Safari
- Internet Explorer
Example:
<!DOCTYPE html> <html> <head> <body> <picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src="img_orange_flowers.jpg" alt="Flowers" style="width:auto;"> </picture> </body> </html>
Output:
