Lazy loading images is one of the techniques to decrease the initial page load of a website and to increase performance. Lazy loading images on websites is pretty easy these days.
To lazy load images natively in the browser, you can declare the loading attribute to be lazy in the image tag.
<!-- Lazy Loads Images -->
<img src="https://via.placeholder.com/150" loading="lazy" />
Adding loading="lazy" will help to reduce the initial page load of a website.
If you don't want lazy loading in some images or want the images to load when the website loads, then you can use the loading="eager" attribute in the image tag or not having a loading attribute in the first place 🙂.
<!-- Loads Images When Website Loads -->
<img src="https://via.placeholder.com/150" loading="eager" />
<!-- OR not use the loading attribute -->
<img src="https://via.placeholder.com/150" />
See the compatibility for various browsers on Can I Use.
See this example live in JSBin.
