How to Implement Native Image Lazy Loading, Very Easy!
Lazy Loading is a technique that loads resources like images at the very end after the page loads or loads only when needed. Lazy loading ...
Lazy Loading is a technique that loads resources like images at the very end after the page loads or loads only when needed. Lazy loading can also be called on-demand loading.
What is Native Lazyload Images
Lazyload images is a feature that is already embedded in modern browsers like Google Chrome and Firefox, Chromium-based browsers like Opera, Edge (latest version) and Brave Browser also already have this feature. As for Safari, I’m not sure, and in the web.dev blog it says “coming soon” which might still be in development. Native Lazyload doesn’t require any plugins like JavaScript, because it’s already embedded in the user’s browser.
Native Lazyload images will load images as needed, if the image is visible on screen then the image will be loaded while if it’s not visible on screen for example it’s at the very bottom of the page then the image will not be loaded and will be loaded when the user scrolls the browser to the image section.
See the following video, when at the top other images are not loaded while when scrolled down to other image sections then it will load other images.
Advantages of Native Lazyload
The advantages of using native lazyload include the following.
- Very easy to implement
- Without any plugins
- Makes user memory lighter
- Speeds up page loading
How to Implement Native Lazyload
To implement native lazyload you just need to add the loading="lazy" attribute to the image. For example:
<img src="/image.jpg" loading="lazy">
However, it’s better to add height and width attributes, so that when the image hasn’t appeared there is white space on the image so that when the user scrolls to the image section the text won’t move.
<img loading="lazy" width="1000" height="1500" src="./img.jpg" />
And add the following style so that the image is not displayed outside the page body.
img {
max-width: 100%;
height: auto;}
Final Words
Very easy isn’t it? Even people who just learned HTML language can immediately implement native lazyload images.