HTML - srcset Attribute

HTML srcset attribute is used to specify the URL of an image to use in different situations like smaller screen devices.

In other words, we can say that the scrset attribute is useful to represent the different images, which depend on different screen sizes. If we wants to render different images based on the screen sizes of the devices we can use this tag.

Syntax

<tag srcset="URL">

Where, "URL" specifies the URL of image.

Applies on

The below-listed elements allow the use of the HTML srcset attribute.

Element	Description
<img>	HTML <img> tag is used to embed image in to the HTML document.
<source>	HTML <source> tag is an empty element used to define a variety of media resources in different formats, such as audio, video, and images.

Examples of HTML srcset Attribute

Bellow examples will illustrate the HTML srcset attribute, where and how we should use this attribute!

Using srcset attribute with "source" element

When we run the below 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.

<!DOCTYPE html>
<html>

<head>
    <title>HTML srcset Attribute</title>
</head>

<body>
    <h1 style="color: green;">
        Tutorials<span style="color: black">point</span>
    <h1>
    <h2>HTML 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>

Using srcset attribute with "img" element

When we run the below code, it will generate an output consisting of the image on the webpage. when the user tries to change the webpage width it displays the same image with different sizes provided in the sizes attribute.

<!DOCTYPE html>
<html>

<head>
    <title>HTML srcset Attribute</title>
</head>

<body>
    <h1 style="color: green;">
        Tutorials <span style="color: black">point</span>
    </h1>
    <h2>HTML srcset Attribute</h2>
    <img srcset=
"https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 100w,
https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 300w,
https://images.unsplash.com/photo-1546587348-d12660c30c50?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8bmF0dXJhbHxlbnwwfHwwfHx8MA%3D%3D&w=1000&q=80 600w" 
         sizes="(max-width: 710px) 100px, (max-width: 991px) 300px, 600px">
</body>

</html>

Supported Browsers

Attribute
srcset	38.0	13.0	38.0	9.1	25.0

html_attributes_reference.htm