Responsive images sizes improve application performance

5 min readMar 19, 2021

Responsive images sizes is a frontend technique that help to improve application performance, considering that images are responsible for more than 60% of download size, developers should be aware of these techniques.

Images are loaded and sized appropriately depending on each device and resolution. Attributes like srcset and sizes let browsers know in advance how to display the right image based on the current viewport width.

Developers can also use picture and sources in combination with media queries to define the best loading strategy. So it’s important to load the right image when the window resolution changes and hit a specific breakpoint.

Responsive Images Sizes

When you define in your HTML a list of the image using srcset, the browser doesn’t know which size of image to load because the style is applied after downloading the asset. So browser will load and show the right image only after loading the css block to figure it out.

Browsers also assume that the image size is the viewport size if developers doesn’t define it. In other words, doesn’t matter if the size is 100% or 50%, it will be using the reference of 100vw anyway.

Using sizes attribute we can give information ahead to the browser to decide which image to load, we can also use media queries to define the viewport size that image calculation should use as reference.

For a desktop that has a row with 4 columns, we should consider a size of 25vw for each column, this size should be a reference to load a smaller image than the original viewport 100% as reference.

If you want to be more accurate you can use calc to also remove the margins.
For example, calc(25vw — 1rem), then it will give you the exact size of the image.

Cache totally matter using these strategies. In this scenario, if there is a bigger image cached already, then the browser will load it instead of loading a new one based on the resolution.

Keep in mind to always define the standard src attribute using original image size, it uses it as a fallback for browsers that don’t support srcset yet.

Srcset Attribute

Nowadays, the problem is not only the different size screens that vary from mobile to desktop monitors, there are also so many different resolutions.

For example, either 4k monitors and apple retina are able to render more pixels than ever into smaller places, that’s why designers need to provide images 2x, 3x or even larger than the original. That’s the only way to make images look better in these kind of displayers.

Most of softwares used to produce assets have the option to export images in multiple resolutions simultaneously. Usually these assets follow a simple guide of 1x, 2x, 3x and 4x.

Then developers can setup a strategy to load just one image in relation to the current screen size and resolution. This techniques provide to the final user a better user experience, improving performance and quality.

We can set a list of images and let the browser choose which one fits better for the specific resolution. The browser choice depends on some combinations:

The viewport resolution.
The image size relative to the viewport.
The pixel density of the user’s device.
The source file’s dimensions.

<img src=”./assets/image.jpg” 
     srcset=”./assets/image@1x.jpg, 
             ./assets/image@2x.jpg, 
             ./assets/image@3x.jpg, 
             ./assets/image@3x.jpg” />

Imagine a list of images exactly like the one above.
The first image of the list will be automatically loaded as default.
It just happens because the browser has no clue how to load the right image.

However, you can add the size information along with the image path to help the browser, providing it the browser is able to calculate in advance and load only the appropriate image.

It is important define responsive images sizes to improve you website downloading performance.

Let’s see different options of how we can define image sizes.

Images Sizes (Density or Width)

Most developers use density for the fact that designers can export the entire package of images automatically. It is a lot common if you’re developing a game.

Density defines how many times bigger the images are from the original one.
In the list below, browser can load up to 4 different sizes of images depending on the resolution and DRP.

<img src=”./assets/image.jpg” 
     srcset=”./assets/image@1x.jpg 1x, 
             ./assets/image@2x.jpg 2x, 
             ./assets/image@3x.jpg 3x, 
             ./assets/image@3x.jpg 4x” />

You can use Chrome Dev Tools to simulate it.
Select the device as responsive and play with the DPR options.
After that, verify the networking tab to see the size of the image loaded.
You can realise that the image was loaded according to the device pixel ratio.

On the other hand, some portals load images directly from content managers that upload them with different sizes (these images usually references as small, medium and large).

The best scenario to use width is when we want to load the image according to the screen size.

<img src=”./assets/image.jpg” 
     srcset=”./assets/image@1x.jpg 500w, 
             ./assets/image@2x.jpg 1000w, 
             ./assets/image@3x.jpg 1500w, 
             ./assets/image@3x.jpg 2000w” />

Another point to keep in mind is that you can provide better quality image regard to the device resolution.

For example, the newest iPhones provide a DPR of 2x or 3x.
This technology allows developers to provide images with better quality even if the user is using a small screen. A larger image loads and scales down to fit into the specific container.

Responsive Images Sizes using Picture and Sources

Use picture and source elements to combine different media queries to load specific images when the window changes.

So it goes the other way from the previous example. We don’t let the browser decide which image to load. Quite contrary, we can force ourselves which image to load depending on the screen resolution and or specific breakpoints.

In this example, we load standard image for regular resolutions. However, things start getting more interested when the application window resizes.

Window width up to 767px will be loading an image 1x or 2x bigger than the original one. But it also depends on the DRP (this breakpoint usually represents small devices).

Window with over 770px will be loading bigger images.
In our list up to 3x or 4x bigger than the original one (this breakpoint usually represents desktops or tvs).

<figure>
     <picture> 
        <source media=”(max-width: 767px)”
                srcset=”./assets/image@1x.jpg 1x,
                        ./assets/image@2x.jpg 2x” />         <source media=”(min-width: 770px)”
                srcset=”./assets/image@3x.jpg 3x,
                        ./assets/image@4x.jpg 4x” />         <img src=”/assets/image.jpg”> 
     </picture> 
</figure>

Conclusion

Developers can easily combine srcset attribute with density or width size to improve drastically their applications performance. Responsive images sizes improve a lot the performance reducing the downloading time.

Considering that images are responsible for more than 60% of download size.
These techniques become important to reduce your render block and load assets faster than never.