Lazy-Loading Images: How NOT to Really Annoy Your Users

Images are almost everywhere on the web. They provide critical information, visual interest and important 'break points' for users within long slabs of text. Often images are the core focus of the content. This might be due to the intent of the website – Imgur or Flickr for instance – or simply because words may not adequately explain things like images can.

This tutorial will discuss how to lazy-load images when you have to load a lot of them. Why is it important to load images lazily and how to do it in a manner that does not compromise user experience.

I would also suggest that you read the SitePoint tutorial on image optimization. Both these tutorials have similar goals and can significantly improve user experience and load time of webpages when used together.

Why Load Images Lazily?

Before we dig deeper, perhaps we should first question why you would want to go through all this trouble?

One important reason is that it should considerably decrease page load time. Often scripts require the DOM to load completely before they can run. If those scripts are needed to provide some information to the user or to provide an important function then waiting for 8 to 10 seconds is going to frustrate the users. Most users are not going to wait for that long and will abandon your site for faster ones.

Another benefit is the saving in bandwidth for both you and the user. If a user is not going to scroll past first 10 images then its is useless to load all of them. Let's say there are 30 images on a webpage. Even if each of these images is just 30KB in size. The Bandwidth savings would be 600KB per hit on the webpage. For a high traffic website with say 2 million page views per month, just lazy-loading images will save about 1 million megabytes of bandwidth.

Setting up a Plugin

There are a lot of plugins available to load images lazily. For this tutorial, I am going to use the jQuery Lazy Load plugin. This plugin is about 3.3KB in size and has a lot of useful features. You can include the minified version directly in your code to save an extra request or you can load it from a CDN.

No matter which plugin you use, you will have to make a few changes in the markup. You need to add height and width attributes to all the images along with a .lazy class. Additionally, you need to change the src attribute to data-original. This is what your image tag will look like after the changes:

<img class="lazy" data-original="image.jpg" width="640" heigh="480">

Now, in your JavaScript code include following snippet :

$("img.lazy").lazyload();

That's all you need to do. Now, all your images will load lazily. Here is a CodePen demo: http://codepen.io/SitePoint/pen/WrXjmQ

See the Pen Lazy Loading Demo – by Monty Shokeen by SitePoint (@SitePoint) on CodePen.

Making Further Improvements

The main purpose of going through all this trouble is to make users feel that your website loads quickly. To make sure users keep feeling that way you need to ensure that their experience is seamless.

When using lazy load plugins, images start loading only when they appear on the screen. This can be a bit of an annoyance for users who actually do scroll down to the bottom of the webpage. They will need to wait a little before every image loads completely.

To overcome this issue you can set a threshold value. This way the images will load just before they appear on the viewport. Setting it to a reasonable value like say 500 will load images 500px before they appear on the viewport. This will make sure that the images are fully loaded when the user scrolls down.

If a user scrolls down really quickly they will see gray blocks in place of images. If you like you can set the value of placeholder to some other 1x1 pixel image with different color that goes with the theme of your website. You can optionally use some other image as a placeholder until the original image loads. This can be achieved by setting the value of placeholder to an image URL in the script.

One final issue you might have is that the images on your website don't have fixed size but are responsive. In such cases, you can set the width and height of all images to an arbitrarily large value. After that you can apply the following CSS to all concerned images:

.lazy{
 max-width: 100%; 
 height: auto; 
}

Other Available Plugins

Lazy Image Loading is useful for most sites and is becoming increasingly popular. This explains the surfeit of plugins available, each with their different features and dependencies. I'll mention two today – jQuery Unveil and Blazy.

jQuery Unveil is a lightweight version of Lazy Load plugin with just basic functionality. As the name suggests it depends on jQuery for proper functioning.

If you are not using jQuery on your website you might prefer to use Blazy to lazy-load images in pure JavaScript. It works on all major browsers including IE+7.

If you decide to use Lazy Load plugin that we discussed in this tutorial, you can read more about it on the official website. There is information about loading images based on specific events and providing support for browsers with JavaScript disabled.

Conclusion

In this tutorial, we focused on loading images lazily. Although, I used the Lazy Load plugin in the tutorial, you can use any plugin that you like. What is more important is that you follow the basic principles that I mentioned in the tutorial like setting up a threshold etc. This way you will have a faster website and provide a better experience to visitors.

If you know about more plugins and tips to lazy-load images or have any questions please mention them in the comments.