HTML <picture> Tag
<picture>
<source srcset="http://www.htmlcodes.ws/images/examples/milford_sound_nz.jpg" media="(min-width: 600px)">
<img src="http://www.htmlcodes.ws/images/examples/byron_bay_australia.jpg" alt="Sample image">
</picture>
The above example demonstrates usage of the <picture>
element.
Change the min-width
value to see how the image changes depending on the width of the viewport.
The <picture>
element is a container that provides multiple sources to its contained <img>
element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.
It doesn't display anything by itself. It it simply provides a context for its contained <img>
element to enable it to choose from multiple URLs.