How to progressively load images and add a blurry placeholder?

Loading images progressively is very important especially when you have tons of images on your web page.

MDN has a really nice guide on Progressive loading.

Example 1: With CSS blur

Here’s a demo I created using MDN code:

Example 2: Without CSS blur

I created another example that doesn’t actually require you to add CSS blur property.

Here’s what I did.

I load the image with smaller height and width first since your browser will just start downloading the image when it sees the src.

<img loading="lazy" 
  src="https://picsum.photos/id/1016/10/10" 
  data-img="https://picsum.photos/id/1016/200/200" 
  width="200" 
  height="200" 
  class="image" 
  alt="Mountain" 
/>

As you can see, I also have another actual larger image in data-img attribute. That actual image will be fetched using JavaScript.

The idea is to change the src for the images and let browser fetch the images.

Here’s the working example:

Share this post