Better responsive images with srcset and sizes attributes
- Published on
- • 5 mins read•––– views
sizes are two HTML attributes that can be used to create responsive images. They are used to specify the image source and the size of the image. They are used together to create images that are optimized for the device they are being displayed on.
In this article, I will not be going into the details of how responsive images work. I will be focusing on how to use the
Let's take a look at the basic
<img src="image.jpg" alt="image" />
src attribute is used to specify the image source. Web browsers will download the image and display it in all devices with the same size no matter what the device's screen size, pixel density, or viewport size is.
So if you have a
2000px wide image, it will be displayed as a
2000px wide image on a 4K monitor - which is fine, but it will also be downloaded and displayed as a
2000px wide image on a
320px wide mobile phone screen - of course, it will fit the screen, but it's unnecessarily large and will take a long time to download.
That's where the
sizes attributes come in. We will use them to provide different image sources/sizes for different devices and let the browser decide which image to download and display.
<img src="image.jpg" srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 320px) 280px, (max-width: 640px) 640px, 1280px" alt="image" />
sizes values look a bit complicated (and easy to forget ), but they are not that hard to understand.
srcset attribute is used to specify the image sources and their sizes. The image sources are separated by commas, and each image source is followed by its size in pixels with the following parts:
image-source- the image's URL (e.g.
- A space
image-size- the image's intrinsic size in pixels (e.g.
320w) - notice the
wat the end of the size instead of
pxto indicate that the size is in pixels.
In the example above, we have three image sources:
- The first image source is
- The second image source is
- The third image source is
So now we have a set of images with different sizes, but how do we tell the browser which image to use ?
Here comes the
sizes attribute defines a set of media conditions and help the browser decide which image to use when the conditions are met.
Each size is separated by commas, and being constructed with the following parts:
- A media condition - a set of media features and values that define the condition (e.g.
(max-width: 320px)). Notice that the condition is wrapped in parentheses, like a css media query. In this case, the condition is that the viewport's width is less than or equal to
- A space
- A size - the size of the image to use when the condition is met (e.g.
And here are the steps of how the browser decides which image to use:
- Looks at the device's screen size.
- Looks at the
sizesattribute and finds the first condition that matches the device's screen size.
- Uses the size defined in the condition to find the image source with the same size in the
srcsetattribute, if there isn't one, it will use the first image that is larger than the size defined in the condition.
- Load the image and display it.
And that's it, we have created a responsive image .
Take a look at the example above, let's say we are on a mobile phone with a screen size of
- The first condition match that screen is
- The size defined in the condition is
- The image source with the same size in the
- The browser will load the image and display it.
Beyond the basics
sizesattribute, you can use
pxto define the size. This is useful when you want to use the viewport width as the size. For example, if you want to use the viewport width as the size, you can use
100vwas the size.
loading="lazy"to improve performance. When the
loadingattribute is set to
lazy, the browser will not load the image until it is visible in the viewport. This is useful when you have a lot of images on the page and you want to improve the page's performance.
heightattributes to the
imgelement. When the
heightattributes are added to the
imgelement, the browser will reserve the space for the image before it is loaded. This is useful to prevent layout shifts and improve the experience to your visitors.
And don't forget to add a fallback image with the
srcattribute. When the browser doesn't support the
sizesattributes, it will use the image source defined in the
At the end, the
img element should look like this:
<img src="image.jpg" srcset="image-320.jpg 320w, image-640.jpg 640w, image-1280.jpg 1280w" sizes="(max-width: 320px) 280px, (max-width: 640px) 640px, 1280px" loading="lazy" alt="image alt text" width="1280" height="720" />
Happy coding .