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.
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML course.
<picture> Image and source tag <picture>
Below example illustrates the <picture> tag in HTML:
- Google Chrome 38.0
- Internet Explorer 13.0
- Firefox 38.0
- Safari 9.1
- Opera 25.0