HTML <picture> Tag
In this blog about HTML <picture> Tag, we will see how that happens HTML <picture> Tag is used in responsive web designing where we need to load different images based on their viewport, height, width, orientation, and pixel density.
The <picture> Tag consists of one or more <source> elements and an <img> Tag. Using which we can show images. Media query inside the source tag will be for him to do.
Depending on the viewport, matching images will be loaded from different <source> Tags, and if no source contains a matching image, the default image in the <img> Tag will be displayed on the browser.
Example:-
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
HTML picture Tag
</title>
</head>
<style type="text/css">
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
</style>
<body>
<h1 style="margin-bottom: 50px; ">This is HTML picture tag Example</h1>
<picture>
<source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-baby-boy.jpg" media="(min-width: 1050px)">
<source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-girl.jpg" media="(min-width: 750px)">
<source srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-girl.jpg" media="(min-width: 450px)">
<img srcset="https://www.myprograming.com/wp-content/uploads/2021/10/cute-smile-baby-boy.jpg" alt="default image" style="width: auto;">
</picture>
</body>
</html>Output:-
