The <picture>
tag lets you display images in a responsive way, by displaying a different image version for smaller viewports.
It has to contain one or more <source>
tags and one <img>
tag.
The <img>
tag will be used only if the viewport doesn’t match any of the <source>
tags or if the browser does not support it.
<picture>
<source media="(min-width: 920px)" srcset="image_large.png">
<source media="(min-width: 320px)" srcset="image_small.png">
<img src="image_default.png" alt="Benefits">
</picture>