Lazy loading images in React

Photo by Mike van den Bos on Unsplash

What the heck is lazy loading ??

Instead of loading the entire web page and rendering it to the user in one go, the lazy loading assists loading only the required section (usually user’s viewport) until it is needed by the user.

An example can be seen on unsplash. Initially, we see a really low quality image, and as soon as we scroll down, it is fully loaded onto the page. This ultimately leads to reduced bandwidth usage, improved user experience and speeds up page loading.

unsplash lazy loading

Before moving ahead, let just see, why do we even need lazy loading for images ??

• Saves data and bandwidth — Images out of the viewport are not downloaded immediately, thus lazy loading conserves bandwidth usage.
• Lowers cost of a CDN — Media services (like Cloudinary) offers plans for media storage, lazy loading images ensure that only images that are actually required are requested from the CDN, thus reducing server costs.
• Improves SEO — As we know that, loading speed is an important factor that affects SEO. Lazy loading reduces your page loading time, this in turn improves SEO.

Let’s goooo..

We will use a JS library called React Lazy Load Image Component. Just as it’s name suggests, this library provides us with a lazy load image component, and it also provides us with a plugin to blur an image which will use further down this article.

• Github Link

Initial Setup

Let’s start a new project.

npx create-react-app react-lazy-load

Let’s install our package now, by writing

npm i react-lazy-load-image-component

Start off your react server, by simply writing

npm start

Styles

Before moving ahead, update your App.css with the below mentioned code.

/* App.css */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.img {
    height: 100vh;
    width: 100vw;
}

You can find all the images and their placeholders, in this repository inside the public folder.

Lazy Load Component vs Image tag

So, this is the basic approach of adding images in our webapp. But this has many problems, if you open up your network tab, you’ll see something like this.

Requests on using img

Notice how all the 7 images are loaded at once, this slows down our website.

If you’ve a gallery app or a social feed app or any other app that need to serve a lot of images, loading all the images at once doesn’t make any sense.

This is where “Lazy Loading Image React” comes to our rescue.

Have a look at the updated implementation of App.js.

Instead of the “img” tag, we are using “LazyLoadImage” component, but don’t worry, it works exactly same like “img” tag, that is, you can style it just like the “img” tag.

Placeholder (optional) : Placeholders are the images which are rendered on the screen while the actual image is being fetched from the server. Placeholder images are generally less than 5KB, whereas actual image could go upto 5 or maybe even 10 MBs. In our example, actual images are around 4 to 5 MBs, and placeholders are around 1–2 KBs.

In a real world app, what really happens is when a user uploads an image, multiple copies of the same image with different size and quality are created (placeholder image is one of them), so we can use them whenever required.

Let’s have a look at the network tab now.

Requests with lazy load component

Notice how, all the placeholders are fetched, and only 2 actual images are fetched initially. If you scroll further down, images appearing in your viewport would be simply fetched from the server and would be rendered on the screen.

If you want to simulate network connections in your browser, open up your developer tools network tab and change throttle according to your needs.

Github : https://github.com/AshishPandagre/lazy-loading-images-react

Demo : https://github.com/AshishPandagre/lazy-loading-images-react#demo-