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 Tag Example</title>
<meta charset="utf-8" />
<style>
.topic {
border: 1px solid #d1d1d1;
background: #e5e5e526;
padding: 0px 0px 10px 0px;
text-align: center;
align-content: center;
}
</style>
</head>
<body>
<div class="topic">
<h3>HTML picture element example</h3>
<p></p>
</div>
<p>Resize the browser window to load different images.</p>
<picture>
<source media="(min-width:650px)" srcset="resources/images/html_images_mountain01.png">
<source media="(min-width:565px)" srcset="./resources/images/html_images_mountain02.png">
<source media="(min-width:465px)" srcset="resources/images/html_images_mountain03.png">
<img src="./resources/images/html_images_mountain04.png" alt="Mountain" style="width:auto;">
</picture>
</body>
</html>
Click on the "See output" button to see how it works.