Lazy Load Images in React

In this article, we will be discussing how to lazy load images in React. We can use the react-lazy-load-image-component. It is a npm package for react to lazy load images and other components.

Prerequisites

• Understanding of React

What is Lazy Load?

Lazy loading is an optimization method where an item is loaded only when required. An item could be an image, video, web page, music file, or document. We can implement lazy load images in react using React.lazy function and <Suspense> component or by using packages that provide a lazy loading feature. In this tutorial, we will be using the react-lazy-load-image-component package.

Why Lazy Load?

The lazy loading method offers lots of benefits by loading the items only when required. It will reduce the useless loading of the items that are not required initially. Some of the benefits of lazy load are:

Faster page loading: Lazy loading reduces the weight of a web page and hence loads the webpage faster. It also improves SEO by loading the pages faster.

Less bandwidth consumption: The Lazy load is applied to items like images, videos, or large documents, it will save data and bandwidth as they will only load when required.

Reduced work for browser: When the lazy load is applied to an item, the browser does not need to process it until it is requested. So, this will significantly reduce work for the browser.

Implementing Lazy Load Images in React

Let’s get started on implementing lazy load on an image component in React.

Step 1: Install react-lazy-load-image-component

npm i react-lazy-load-image-component

Step 2: Import react-lazy-load-image-component to your Component

import { LazyLoadImage } from "react-lazy-load-image-component";

Step 3: Use the LazyLoadImage Component

The <LazyLoadImage/> component is similar to img tag. We can specify the source of an image using the src key and set the height and width of the image component using width and height keys.

         <LazyLoadImage
          src={"/image.jpeg"}
          height={"500px"}
          width={"700px"}
          alt={"image"}


        />

Step 4: Apply in-built Plugins

        <LazyLoadImage
          alt={"image"}
          effect="blur"
          height={"500px"}
          width={"700px"}
          src={"/image.jpeg"}
          PlaceholderSrc={"/compressedimage.jpg"}
        />

The LazyLoadImage provides a variety of plugins. We can explore the available plugins here. In this tutorial, we will be using effect with value “blur” to blur an image while it loads and remove the blur after it loads completely. We also used another plugin called PlaceholderSrc. It is used to specify a low-resolution image of the main image. It is used as a substitute to fill the area while the main image is loading.

Output

As we can see, Using the lazy load images in react, the image is only loaded when the scroll bar reaches its area. We can see a low-quality blurred image initially while the main image is loading and the main image after it is loaded completely.

Conclusion

In this tutorial, we discussed how to lazy load images in React. We understood that lazy loading optimizes the app performance by loading the item only when required. We used the react-lazy-load-image-component package to implement lazy loading in an image component.