HTML srcset Attribute

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!

Share this: