HTML <picture>
tag
<picture>
tag uses <source>
tag and <img>
tag.
<picture>
tag has fallback options.
If any of <source>
tags display then remaining goes off. The last option work as a fallback image.
<img>
tag is the last child of the <picture>
tag as a fallback option if none of the source tags matches.
Learning with HTML Editor "Try it Now"
You can edit the HTML code and view the result using online editor.
Example
<!DOCTYPE html>
<html>
<head>
<title>HTML Picture</title>
<meta charset="utf-8" />
</head>
<body>
<h1>The picture element</h1>
<p>Resize the browser window to load different images.</p>
<picture>
<source media="(min-width:650px)" srcset="workplace1.jpg">
<source media="(min-width:465px)" srcset="workplace2.jpg">
<img src="workplace2.png" alt="workplace2" style="width:auto;">
</picture>
</body>
</html>
Click on the "See output" button to see how it works.