srcset attribute of the
img tag allows you to set responsive images that the browser can use depending on the pixel density or window width, according to your preferences. This way, it can only download the resources it needs to render the page, without downloading a bigger image if it’s on a mobile device, for example.
Here’s an example, where we give 4 additional images for 4 different screen sizes:
<img src="dog.png" alt="A picture of a dog" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w">
srcset we use the
w measure to indicate the window width.
Since we do so, we also need to use the
<img src="dog.png" alt="A picture of a dog" sizes="(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px" srcset="dog-500.png 500w, dog-800.png 800w, dog-1000.png 1000w, dog-1400.png 1400w">
In this example the
(max-width: 500px) 100vw, (max-width: 900px) 50vw, 800px string in the
sizes attribute describes the size of the image in relation to the viewport, with multiple conditions separated by a comma.
The media condition
max-width: 500px sets the size of the image in correlation to the viewport width. In short, if the window size is < 500px, it renders the image at 100% of the window size.
If the window size is bigger but <
900px, it renders the image at 50% of the window size.
And if even bigger, it renders the image at 800px.
vw unit of measure can be new to you, and in short we can say that 1
vw is 1% of the window width, so
100vw is 100% of the window width.
A useful website to generate the
srcset and progressively smaller images is https://responsivebreakpoints.com/.