Progressive Image Loading in React

Photo by Rahul Mishra

Hello Developers 💻 ,
Images … . they are fascinating and also a headache to manage in any web application.

In this article I am explaining a way by which we can load large images behind the scenes and while the image s are being loaded either we can show a low quality image or we can show a loader behind it.

Let’s begin the party 🗼

1. Showing a low quality Image first, then loading high quality image behind the scenes.

If you are getting image url from any API then either talk to your backend team to provide you a low quality image url, smaller the size, better the experience. And if you don’t have this privilege to talk to backend team you may use any default blur image by searching the web.

So the trick is, first we load the low quality image to give use an illusion that something is happening and in the background we keep loading the otiginal image.

Below is the code to fetch high quality image behind the scenes:

Component to load low quality image first, then high quality one

Demo of the above code:

Loading Low quality Image first, then High Quality.

2. Showing a loading indicator while image is being loaded

If you don’t have the low quality image URL then we can show a loader in place of image. On the following demonstration I am only showing a loading... text. But you can change the way you like.

Show a loading text, while the image is being loaded in the background

Here is the code that is responsible for the above magic:

Component to show loading text first and the image.

For this approach possibilities are endless. You may toggle classes to hide and show image and loader, add transitions etc.

If ( you create something beautiful out the above example) {

console.log(“Then please share it in comments. I’ll love to see the creativity of yours.”)

}