How to load images of different sizes on different screen widths using HTML?

November 15, 2022 - 5 min read

To load images of different sizes on different screen widths or sizes using HTML, you can use the srcset attribute on the img HTML tag and the value should be the url of the image followed by a whitespace and the original width of the image. The width should end with the unit of w (1w means 1px). If you have more image sizes then the , symbol (comma) should be used to separate the values (image url and its original width).

The srcset should be used along with the src attribute. According to the user's device width, the browser will automatically choose the image url from the srcset attribute values and replace it with the default value on the src attribute.

Why is this used?

Sometimes on smaller screen devices, downloading a big image is not needed and will also be affecting the network bandwidth of the device which in turn affects the performance of our website on smaller devices. To compact this problem the srcset attribute is introduced in the img HTML tag.

TL;DR

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      using the `srcset` attribute on the `img` HTML tag to set
      different image URLs and the image widths to be chosen
      automatically by the browser according to the user's device-width  
    -->
    <img
      src="/01_small.jpeg"
      srcset="/01_small.jpeg 640w, /02_medium.jpeg 1920w, /03_large.jpeg 2400w"
    />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

For example, let's say we have a webpage with an image tag (img) and a random paragraph (p) like this,

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <img src="/01_small.jpeg" />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

The webpage now looks like this,

As you can see from the above code that in the img HTML tag, we have used the src tag and given an image url as the value. Currently, the browser downloads this image on every screen size.

Now let's introduce the srcset attribute on the img tag and use different image URLs for different screen widths.

These are the image URLs and their original widths which we are going to set as the values of the srcset attribute:

  • for the image url 01_small.jpeg it has an original width of 640w
  • for the image url 02_medium.jpeg it has an original width of 1920w
  • for the image url 03_large.jpeg it has an original width of 2400w

The values for the srcset attribute should be in the format where the image url is first followed by a whitespace and then the original width of the image with the unit of w. Since we have three image URLs, we have to separate them using the , symbol (comma).

It can be done like this,

<html>
  <style>
    /* Basic styles for image */
    img {
      max-inline-size: 30vw;
      block-size: auto;
    }
  </style>
  <body>
    <!-- 
      using the `srcset` attribute on the `img` HTML tag to set
      different image URLs and the image widths to be chosen
      automatically by the browser according to the user's device-width  
    -->
    <img
      src="/01_small.jpeg"
      srcset="/01_small.jpeg 640w, /02_medium.jpeg 1920w, /03_large.jpeg 2400w"
    />
    <p>Photo by Neha Maheen Mahfin on Unsplash</p>
    <p>
      Lorem, ipsum dolor sit amet consectetur adipisicing elit. Repellat ipsam
      aspernatur totam consequatur labore? Vitae voluptas pariatur quos
      repellendus aliquam at magni asperiores nostrum, atque a vero odio. Odit
      dolores quae voluptas enim error quas, architecto minus voluptates. Illum,
      alias molestias ipsam quo accusantium magnam modi eveniet fugit
      perferendis officia dolor nemo eos dignissimos in ipsum neque autem
      voluptas obcaecati. Reiciendis doloremque sed et quo.
    </p>
  </body>
</html>

Now let's check the Devtools (if you are in chrome, you can right-click on the webpage, and select the Inspect option) and go to the Network tab to see which size is getting downloaded for each screen size.

Screen size of 1440px

Screen size of 1000px

Screen size of 500px

This will help a lot in improving the performance of the webpage.

We have successfully loaded different image sizes on different screen sizes or widths using HTML. Yay 🥳.

See the above code live in the codesandbox.

That's all 😃.