1. Home >
  2. Apps >
  3. Tutorials >

HTML Lazy Loading Images With loading="lazy" Attribute - Explained

The loading="lazy" attribute allows images to be lazy loaded without Javascript. It speeds up web pages, improves SEO and saves data on mobile phones. This short tutorial explains it.
Ankita Katdare
Rank A1 - PRO

The native HTML lazy loading for images with the loading="lazy" attribute, is a game-changer for the Internet. If a web page contains multiple images, the browsers tend to download all of them in one go - even if the images are not in the user's viewport. 

This not only wastes the data but unnecessarily slows down web page loading speed. There are several solutions available, mostly Javascript-based, that allowed lazy loading of images. Before we look at how the native HTML lazy loading attribute helps solve the problem, we'll understand what lazy loading is and how it works.

How Image Lazy Loading Works


Consider a web page containing 10 images. A user wants to view the page on their mobile screen. In a typical situation, the mobile browser will attempt to download all the images at once before the web page is rendered on mobile display.

swiP-html-lazy-loading-images.jpg

Of course, this will not only consume data and the images that user does not intend to view are also loaded on the web page. More importantly, it will slow down the page loading. 

Javascript Lazy Loading Libraries


Javascript powered lazy-loading libraries offered a solution to this problem. The solution was to fetch the image only when the image element was in user's viewport. So new images were fetched from the remote server only when the user scrolled the web page and reached the location of the image on the web page.

However, this solution required adding new Javascript library just to handle the images. 

The "Loading" Attribute


Modern browsers now solve this problem with the new loading attribute. Following are the supported values for loading attribute:

  • loading="lazy": This tells browser to lazy-load images
  • loading="eager": Load the images synchronously with the web page aka load right away
  • loading="auto": Decision to lazy-load is left to the browser


Note: If you do not specify the loading attribute, the browsers will default to loading="auto"

I'll continue this post with more interesting information about image lazy loading.

#HTML

Replies, Feedback and Questions

This is actually a very interesting update. AFAIK, currently only Google Chrome 75 supports its via special flag. But Chrome 76 onwards natively supports the HTML image lazy loading. I believe we should support this feature out of the box at CrazyEngineers as well.

CrazyEngineers upcoming feature - global level site feed will benefit a lot from this feature. First, we'll save on loading extra Javascript file just to support lazy loading of images. Second, the feed will be easily scrollable, without any time delay. 

Also, looking at the performance tests performed by several web developers, Chrome's implementation of lazy loading is actually very good. Chrome could make quick requests to the image and reduce the page load time from 9 seconds to ~4.5 seconds on a page size that is about ~600 Kb in size. 

I must also highlight the SEO benefit of this!

Google's paying lot of importance to faster loading websites and web pages. Google's publicly stated that page loading time is an important SEO factor and web pages that load faster will get preference in the search results.

That's the reason we've Google AMP project which cuts down on CSS and JS and renders web pages directly from Google's cache.