View video tutorial
HTML Picture Tag
HTML
The <picture> element is used to display responsive images, allowing multiple image sources to be provided for different screen sizes, resolutions, or image formats, and then the browser selects the most appropriate image from the provided options.
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.
Syntax
<picture>
<source media="(min-width:650px)" srcset="resources/images/fruits-apple.png">
<img src="./resources/images/fruits-orange.png" alt="fruits" style="width:auto;">
</picture>
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.