Improving web performance by downloading the image efficiently.
Presence of <img /> tag is one of the main reason why some site loads slow. Here are some tricks which can be used to improve the performance of the website by handling the download of image efficiently.
1. Using srcset and sizes instead of just src:
When we use something like <img src="something.png"/> we instruct the browser to download something.png from the server and display it in the browser. The problem here is that regardless of the screen size, the image getting downloaded will be the same. Smaller devices might not require a large image, but we’re downloading the image anyways. This is something which can be improved.
What if we could download different images based on the size of the device without doing any scripting? Well we can achieve this using srcset attribute instead of src and combining it with sizes.
When srcset is present, the browser will first check the size of the screen, and based on that maps the value present in the sizes attribute with the value present in the srcset attribute.
So, in this case, the browser will see if the device width is less than 480 px, if so, then it will look at the srcset with the same value. The eval-fairy-480w.jpg maps with 480w, hence that image will be downloaded. For anything else, the default value will be mapped.
2. Using Lazy Loading :
Image tag has a property called loading which indicates how the browser should download the image. It has the following values:
- eager
- lazy
As the name suggests, eagerdownloads the image immediately whereas lazydefers loading the image until it reaches a calculated distance from the viewport, as defined by the browser.
Unfortunately, lazy loading is not supported in safari. But we can write a polyfill for this using the window property called IntersectoinObserver which provides a way to asynchronously observe changes in the intersection of a target element when it comes to the visible portion of the screen.
Here is a script to achieve lazy loading in all the browsers. We replace src with data-src for all the tag that relies on src and update it as soon as the element is visible on the screen.
3. Compressing the image
This is something that most people just ignore. There are hundreds of free tools available online to reduce the size of an image with lossless compression. This can reduce the size(in bytes)of an image by 30–40%.
4. Check the size (in dimension) of the image you’re using
Make sure you’re using the appropriate size image. Sometimes we end up downloading a large image for something which is displayed in a tiny place in the UI. For example a logo or some image tag whose size you’ve fixed in style. If you’ve fixed the size of the image by style, make sure to keep the image of the same dimension.
5. Provide width and height for all the images and not let it resize on its own.
These are the things that helped me achieve some performance gain on my website. Let me know if you can think of something else.
I hope you found this article useful. I would love to hear your thoughts. 😇
Thanks for reading. 😊
Cheers! 😃
If you find this article useful, you can show your appreciation by clicking on the clap button. As the saying goes, When we give cheerfully and accept gratefully, everyone is blessed.
