Design & UX
Article

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

By Monty Shokeen

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.

Monty Shokeen
Meet the author
Monty is a front-end developer who loves to learn about new JavaScript libraries and frameworks. He has been doing front-end development for three years now and likes to write about interesting libraries and tools that he comes across in his research.
  • chronicler_Isiah

    Nice. Could you not also set the image background colour via css to save the extra request for the 1 pixel square placeholder?

    • Monty Shokeen

      Yes, you could. If you just need to use a plain background color using CSS to set it would be more appropriate. First, you will have to set the placeholder to a blank string though.

  • jack

    Get Rid of Full Screen Push Down Ads: How Not to Really Annoy Your Users

    • http://www.johnwhancock.com/ BlueCaret

      +99999

      Just had to get rid of that stupid ad about 10 times while reading this one article… almost gave up.

    • M S i N Lund

      +1
      Nuke it from orbit.

    • Giancarlo Ventura Granados

      Consider use an Ad-Blocker

  • Pavel

    What would happen if JavaScript failed or didn’t load for whatever reason? (connectivity problems, bad 3G, JavaScript-blockers, third-party scripts fail… you name it)

    • Monty Shokeen

      In that case you need to use the noscript tag. Your final markup should look like:

      • Pavel

        Thanks, Monty
        I thought about it, and this is a good solution for a hard fail, like JavaScript being blocked or disabled completely. If scripts are enabled and not blocked, but didn’t load, will noscript trigger?

        • Monty Shokeen

          In that case noscript won’t trigger.

  • http://alexbondarev.com/ Alex Bondarev

    Are there any SEO issues using this? I wonder how search bots deal with images without src attributes.

  • Maninder Singh

    I am looking for someone who can help me do image manipulation on the web using coding. Please contact me on mps6604@gmail.com

  • Velu Gowtham

    Hi anyone tell me pure javascript scoll lazy load Examples.

  • Yoshua Lino Troncoso

    Problemas al utilizar lazy load en dispositos apple
    la carga va a tirones haciendo scroll hacia abajo

Recommended

Learn Coding Online
Learn Web Development

Start learning web development and design for free with SitePoint Premium!

Get the latest in Design, once a week, for free.