How to load images of different sizes on different screen widths using HTML?
Tags: html
Published: 2022-12-12 05:32:34

---
  title: How to load images of different sizes on different screen widths using HTML?
  published: true
  tags: HTML5
  date: Mon Dec 12 2022 11:02:34 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/load-images-of-different-sizes-on-different-screen-widths-using-html
  cover_image: https://res.cloudinary.com/df8e3k5he/image/upload/blog/main_14fdccffa6.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/load-images-of-different-sizes-on-different-screen-widths-using-html)
  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
<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
<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,

![simple webpage with an image and a random paragraph](/uploads/Screenshot_2022_11_14_at_9_17_18_PM_c53d848d20.png)

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
<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`

![large sized image is used in the webpage for screen size of 1440px](/uploads/Screenshot_2022_11_14_at_10_26_50_PM_aac4753593.png)

### Screen size of `1000px`

![medium sized image is used in the webpage for screen size of 1000px](/uploads/Screenshot_2022_11_14_at_10_30_45_PM_c2e6c076f6.png)

### Screen size of `500px`

![small sized image is used in the webpage for screen size of 500px](/uploads/Screenshot_2022_11_14_at_10_32_58_PM_3a9324976a.png)

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](https://codesandbox.io/s/load-images-of-different-sizes-on-different-screen-widths-using-html-4xqbv2?file=/index.html).

That's all 😃.