Lazy Loading images in HTML

What is Lazy Loading?

Lazy loading is a strategy to identify resources as non-critical and load these only when needed. It's a way to optimize web pages, which translates into reduced page load times. To read more about it:  https://www.geeksforgeeks.org/javascript/what-is-lazy-loading/

Generally images are larger in size, so lazy loading can be used to defer the offscreen images.

Difference from JavaScript solutions ?

There are many JavaScript solutions to support lazy loading but recently browsers have also started to implement lazy loading of images and iframes. Using browser method is more performance but it is not fully supported right now. 

Approach: To use Lazy Loading, use the loading attribute of image tag in html. Here are the supported values for the loading attribute:

• auto: Default lazy-loading behavior of the browser, which is the same as not including the attribute.
• lazy: Defer loading of the resource until it reaches a calculated distance from the viewport.
• eager: Load the resource immediately, regardless of where it's located on the page.

Example:

Output: