How to lazy load images in websites the easy way?
Published October 24, 2020
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
<!-- Lazy Loads Images --> <img src="https://via.placeholder.com/150" loading="lazy" />
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.