The HTML srcset attribute defines the URL of the image to use in different situations.
The HTML srcset attribute is required when <source> is used in <picture> element.
Syntax:
<source srcset="URL"> URL – defines the URL of the image.
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: