HTML - srcset Attribute

The srcset is an HTML attribute that is used to specify the URL of an image to use in different situations. And this attribute applies within the <source> element.

In other words, we can say that the scrset attribute is useful to represent the different images, which depend on the different screen sizes.

Syntax

Following is the syntax of the srcset attribute −

<source srcset="URL">

Where, "URL" specifies the URL of image.

Example

In the following example, we are using the srcset attribute within the <source> tag to display the different image on a different size of the screen.

<!DOCTYPE html>
<html>
<head>
   <title>HTML source srcset Attribute</title>
</head>
<body>
   <h1 style="color: green;"> tutorials <span style="color: black">point</span>
   <h2>HTML source srcset Attribute</h2>
   <picture>
      <source media="(min-width:600px)" width="540" height="220" srcset="https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80">
      <source media="(min-width:400px)" width="540" height="220" srcset="https://images.all-free-download.com/images/graphiclarge/beautiful_nature_landscape_05_hd_picture_166223.jpg">
      <img src="https://img.freepik.com/premium-photo/landscape-waterfall_1417-2002.jpg" style="width:auto;">
   </picture>
</body>
</html>

When we run the above code, it will generate an output consisting of the image on the webpage. when the user tries to change the webpage width it displays another image.

html_attributes_reference.htm
Advertisements