With lazy loading, you are reducing the number of images that need to be loaded on the page initially. This is the most important one for you as a website administrator - better performance and load time. If the user never scrolls, an image that is not visible to the user never gets loaded. An image, not visible to the user when the page loads, is loaded later when the user scrolls and the image actually becomes visible. Lazy Loading defers the loading of an image that is not needed on the page immediately. If an image is not needed up front, load it later when it actually needs to be viewed. For example, in a single page application, if a JS file is not needed until later, it is best not to load it initially. The technique of lazy loading can be applied to almost all the resources on a page. Instead of loading these resources as soon as the page loads, which is what normally happens, the loading of these resources is put off till the moment the user actually needs to view them. Similarly, lazy loading defers the loading of resources on the page till they are actually needed.

The word “lazy” in the English language is often attributed to the act of avoiding work as long as possible. Here is a quick video to help you understand better: These techniques help in improving performance, better utilization of the device’s resources, and reducing associated costs. Lazy Loading Images is a set of techniques in web and application development that defer the loading of images on a page to a later point in time - when those images are actually needed, instead of loading them up front.

Resize image on scroll