Improve your website UX by using progressive, lazy loading images

This post will show you how to use Craig Buckler’s Progressive-image.js to add progressive, lazy loading images to your own website. A progressive, lazy loading image looks like this (refresh the page to see it in action):

This is an image for demo purposes.

After implementing this, images will only be loaded when it’s needed. There are two main benefits to this method:

  • You lower initial page load time because it doesn’t have to load unnecessary images.
  • Your website its performance will increase considerably because it reduces system resources usage.

Installing Craig's progressive-image.js

Let us start with Craig’s great work that is available on Github here. Download the neccessary files and add them to your site.

<link rel="stylesheet" href="css/progressive-image.min.css">
<script src="js/progressive-image.min.js"></script>

Next you will have to change the way of calling images in your HTML. Start by wrapping the <img> in a <a> tag. Inside the link tag you should add the full resolution image. In the <img>, link to a thumbnail of the full image.

The last step is to add the classes needed for javascript to identify what to replace. The image markup on your webpage should look like this:

<a href="title-for-seo-optimisation.jpg" class="progressive replace">
  <img src="title-for-seo-optimisation-thumb.jpg" class="preview" alt="Human and SE friendly description" />
</a>

That is it for the lazy loading of the images! Nothing to it. Check out my batch thumbnail creating script if you want to automatically make these tiny images for this method!