How to do lazy loading of images in HTML

What is lazy loading?

When you are building a web application, the most common type of content you usually have on web pages is images. Images attract more visitors to your website.

However, adding more and more images can increase the load time, and your visitors might be affected due to this. This is where lazy loading comes into play.

Lazy loading is a technique in which images are not loaded as soon as someone visits your website. Instead, the images are loaded after the above-the-fold content is fully loaded, or only when the images appear in the browser’s viewport. This means that if the visitor does not scroll down the web page, the images that are at the bottom of your web page will not be loaded.

Implementing lazy loading

The concept of lazy loading is really helpful if you want your websites to load quickly. In HTML, we can use the attribute loading and set its value to lazy. This will automatically load images in a lazy fashion.

Let’s see a sample HTML file that loads one image. You might not see a significant enhancement in the load time of the web page because we only have one image, but this does make a significant improvement in your overall website response time.

Lazy loading of images in HTML

Explanation

  • In line 6, we define a <img> tag and set the attribute loading to lazy.

At the time this shot was written, the loading attribute of the img tag is supported in most modern browsers except for Safari. This attribute is also not supported in legacy browsers such as IE. Still, lazy loading can improve the website’s overall response time. Therefore, it is still worth adding this attribute for the user so that they can benefit from it.