Various Ways to Lazy Loading Images on a Website

Images are the most requested asset type for most websites. One way to ensure our website still has better performance is to lazy load image. Lazy loading is a strategy to identify resources as non-critical and load those resources only when needed. We can apply this lazy load concept to all resources, including images.

There are many ways to lazy load images on a website:

1. Loading attribute
2. Intersection Observer API
3. Using event handlers

Best practice:

• It is recommended to lazy load images which are positioned below the viewport, if possible.

1. Loading attribute

The first technique to lazy load images is very easy to implement. Just add a loading attribute with the value lazy in the image tag. Loading attributes can have value, either lazy or eager.

loading=”eager” is the default value on img tag. It means image load normally, so the image below viewport also loaded immediately.

loading=”lazy” means image load only if it’s near or visible on viewport. This implementation only supports newer browsers, for example, Chrome ≥ 77. Browser that does not support loading attribute simply ignores that tag.

By using loading lazy, the distance threshold is not fixed and varies depending on several factors (reference). We cannot determine the threshold when we use loading attribute. All of this, already predefined by browser.

Advantage:

• Very easy to implement
• No need to install any library
• Even when javascript is disabled in-browser client, this implementation still works

Disadvantage:

• There are still many browsers that do not/only partially support this feature. Chrome only supports version ≥ 77 (can use a polyfill to work around this).
• Cannot determine manually viewport threshold, for the details (https://web.dev/browser-level-image-lazy-loading/#distance-from-viewport-thresholds).
• Cannot be used when an image load using CSS (background image for example).

https://caniuse.com/loading-lazy-attr

Demo:

https://web.dev/browser-level-image-lazy-loading/

Notes:

If your target user only uses a newer browser, using a loading attribute is still okay. If not, you can either use another solution or polyfill loading attribute and use another implementation if not supported.

You can polyfill this loading attribute in other browsers like https://github.com/mfranzke/loading-attribute-polyfill or polyfill it with the next solution.

2. Intersection Observer API

Intersection Observer API is an API that provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document’s viewport. (https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API).

Intersection Observer is easier to use than using event handlers. We also can set a threshold when using an intersection observer.

In the above code we are calling the observe method on our Intersection Observer and telling to observe intersection changes for the first element with the class test. We pass callback function in first argument in Intersection Observer and for second argument we define options like threshold, root, rootMargin. (reference).

This is the example when we want to lazy loading image.

1. The class attribute, what you'll select the element.
2. The src attribute, contains a placeholder image that will appear when the page first loads.
3. The data-srcattribute, contains real image that you'll load once the element is in the viewport.

Advantage:

• More browser support than loading attribute
• Can define threshold

Disadvantage:

• More code than loading attribute

https://caniuse.com/intersectionobserver

3. Event Handler

This method listens to scroll & resize event to trigger lazy load on image. This can also be implemented in most browser. First, we define element that we want to lazy load. Then, we set timer to loop if image offsetTop already visible in viewport. After that we switch data-src with src, same like we implement in Intersection Observer.

https://caniuse.com/mdn-api_document_scroll_event

Advantage:

• Most browser support this method

Disadvantage:

• Have performance issue, because we always call method to check if image position already visible periodically.

Third-Party Library

There are popular third-party libraries that can be used to lazy load image. The advantage of using library is implementation can be simpler than native one & we can install plugins to extend feature in our lazy load.

1. Lazysizes
2. Lozad
3. Vanilla Lazyload

Conclusion

• If you are sure your target user only use a newest browser, use loading attribute
• If not, polyfill the loading attribute or just replace it and use another method such as Intersection Observer. In addition, use third-party library to simplify implementation. Extend features can also be a good idea.
• If you want most browsers to implement lazy load, using event handler is the last method.

Reference:

• https://web.dev/lazy-loading-images/
• https://developer.mozilla.org/
• https://web.dev/browser-level-image-lazy-loading/
• https://css-tricks.com/the-complete-guide-to-lazy-loading-images/
• https://blog.webdevsimplified.com/2022-01/intersection-observer/
• https://imagekit.io/blog/lazy-loading-images-complete-guide/