HTML <picture> Tag
The <picture> tag in HTML is used to give flexibility to the web-developers to specify image resources. The <picture> tag contains <source> and <img> tags. The attribute value is set to load more appropriate image.
The <img> element is used for the last child element of the picture declaration block. The <img> element is used to provide backward compatibility for browsers that do not support the element, or if none of the source tags matched.
The <picture> tag is similar to <video> and <audio>. We add different sources, and the first source that fits the preferences is the one that will be used.
Syntax:
<picture>
Image and source tag
<picture>Below example illustrates the <picture> tag in HTML:
Example:
html
<!DOCTYPE html><html><head> <style> body { text-align: center; } h1 { color: green; } </style></head><body> <h1>GeeksforGeeks</h1> <h2>HTML <picture> Tag</h2> <picture> <source media="(min-width: 700px)" srcset= <source media="(min-width: 450px)" srcset= <img src= alt="GFG" style="width:auto;"> </picture></body></html> |
Output:
Supported Browsers:
- Google Chrome 38.0 and above
- Edge 13.0 and above
- Firefox 38.0 and above
- Safari 9.1 and above
- Opera 25.0 and above
Please Login to comment...