HTML picture element
The HTML <picture>
element allows you to display different pictures for different devices or screen sizes.
The <picture>
element contains one or more <source>
elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.
Each <source>
element has a media attribute that defines when the image is the most suitable.
Example
<picture>
<source media="(min-width: 650px)" srcset ="image_nature.jpg">
<source media="(min-width: 465px)" srcset ="image_balloon.jpg">
<img src="image_boat.jpg">
</picture>
