The HTML picture element gives the users more flexibility in defining image resources.
The HTML picture element is used for art direction in responsive designs. Instead of having one image that is scaled on the viewport width, multiple images can be designed to nicely fill the browser viewport.
The HTML <picture> tag contains two tags: one or more <source> elements and one <img> tag.
Example:
Resize the browser window to load different images:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<picture>
<source media="(min-width:650px)" srcset="https://lenadesign.org/wp-content/uploads/2022/01/css-diamond.gif">
<source media="(min-width:465px)" srcset="https://lenadesign.org/wp-content/uploads/2021/12/cookie.png">
<img src="https://lenadesign.org/wp-content/uploads/2021/06/ghost-example.jpg" alt="ghost" style="width:auto;">
</picture>
</body>
</html>Output:
Enjoy coding!
Read also: