title | date | tags | summary | images | authors | ||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
Better responsive images with srcset and sizes attributes |
2022-10-25 |
|
A guide to using the srcset and sizes attributes to create responsive images |
|
|
srcset
and 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 srcset
and sizes
attributes.
Let's take a look at the basic img
element:
<img src="image.jpg" alt="image" />
The 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 srcset
and 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"
/>
The srcset
and sizes
values look a bit complicated (and easy to forget ), but they are not that hard to understand.
The 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.image-320.jpg
)- A space
image-size
- the image's intrinsic size in pixels (e.g.320w
) - notice thew
at the end of the size instead ofpx
to indicate that the size is in pixels.
In the example above, we have three image sources: image-320.jpg
, image-640.jpg
, and image-1280.jpg
.
- The first image source is
image-320.jpg
and it's320px
wide. - The second image source is
image-640.jpg
and it's640px
wide. - The third image source is
image-1280.jpg
and it's1280px
wide.
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.
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 to320px
. - A space
- A size - the size of the image to use when the condition is met (e.g.
280px
).
And here are the steps of how the browser decides which image to use:
- Looks at the device's screen size.
- Looks at the
sizes
attribute 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
srcset
attribute, 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 400px
wide.
- The first condition match that screen is
(max-width: 640px)
. - The size defined in the condition is
640px
. - The image source with the same size in the
srcset
attribute isimage-640.jpg
. - The browser will load the image and display it.
-
For the
sizes
attribute, you can usevw
instead ofpx
to 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 use100vw
as the size. -
Combine
srcset
&sizes
withloading="lazy"
to improve performance. When theloading
attribute is set tolazy
, 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. -
Better add
width
andheight
attributes to theimg
element. When thewidth
andheight
attributes are added to theimg
element, 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
src
attribute. When the browser doesn't support thesrcset
andsizes
attributes, it will use the image source defined in thesrc
attribute.
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 .