An HTML magic attribute to lazy load images
Hey guys, today I am going to show you the magic of the lazy load technique and also show you how you can do it.
Let’s see what is lazy loading images and how you can be benefited.
Here you can see a picture of my personal project where I used more than 60+ pictures and these are the stats of loading those images.
What is this Tab?
For those who are unfamiliar with this tab, this is a chrome devtool network tab where you can see which part of the UI elements(images, videos, etc) has loaded in the webpage in Time and Size.
To see these in action open any project (which contains many images) in the browser and go to the Network tab and select disable cache so that the browser cannot cache the website image and you can see the actual load size.
Below select the Img tag to show only image loading properties. In the bottom middle, you will see the actual image size that has been loaded.
In this image, you can see around 77MB of images have been loaded in the first initial load which is a lot. This affects brutally my webpage load time.
How to solve it?
let’s give an attribute called loading in all the images and the value will be “lazy”.
exp: <img src=`yourimage.jpg` loading=`lazy` />
This is the after result. As you can see a total of 22 MB of images has been loaded now which was 77 MB. And my page loads much faster.
How does it work?
The loading attribute specifies whether a browser should load an image immediately or defer the loading of off-screen images until for example the user scrolls near them.
But this attribute doesn’t support all major browsers. See which browser supports it here.
