Lazy loading images
Lazy loading is delaying a file download from the server to the browser until it's needed on-screen (in the viewport). If there are several images on a page all with big file sizes to download it may be beneficial to defer down download until required. These are images 'below the fold'. The benefit is that only an image on-screen when a page is opened is downloaded, making things faster. The rest download when scrolling down to view them.
A disbenefit is that when scrolling down and more images should immediately slide into view, they aren't in view until after another download, starting then, with a momentary whitespace initially. Lazy load or not to lazy load is a matter of preference and what the page circumstances are.
The first image on this page is not lazy-loaded, the second is.
Normal image above:
<img src="img/filename.jpg" width="(width)" height="(height)" alt="">
Lazy-loaded image above:
<img data-src="img/filename.jpg" class="lazy" width="(width)" height="(height)" alt="">
Once a lazy-loaded image is downloaded by being viewed, it will no longer be lazy when scrolling up and down during a page view.
See information