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">
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
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:
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.
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.
Frequently Asked Questions about Lazy Loading Images
What is the impact of lazy loading images on SEO?
Lazy loading images can have a positive impact on SEO. It improves the page load time, which is a crucial factor in search engine rankings. However, it’s important to ensure that the implementation of lazy loading doesn’t prevent search engines from crawling and indexing the images. Using the native lazy loading attribute “loading=lazy” is recommended as it’s supported by most modern browsers and recognized by search engines.
How does lazy loading affect user experience?
Lazy loading can significantly enhance the user experience by reducing the initial load time of a webpage. It ensures that images only load when they’re about to enter the viewport, preventing unnecessary data usage. However, if not implemented correctly, it can cause images to load too late, leading to a poor user experience. Therefore, it’s crucial to strike a balance between performance and user experience when implementing lazy loading.
Can I use lazy loading for background images?
How can I implement lazy loading in a React application?
In a React application, you can use libraries like react-lazyload or react-lazy-load-image-component to implement lazy loading. These libraries provide components that automatically handle the lazy loading of images when they enter the viewport.
What are the alternatives to lazy loading?
Alternatives to lazy loading include preloading and prefetching. Preloading is a technique where you hint the browser to load certain resources in the background that you predict will be needed soon. Prefetching, on the other hand, is a technique where you load resources that might be needed for future navigation.
How does lazy loading work with responsive images?
Lazy loading can work seamlessly with responsive images. You can use the “srcset” and “sizes” attributes along with the “loading=lazy” attribute to implement lazy loading for responsive images. This ensures that the correct image variant is loaded depending on the user’s device and viewport size.
Can I use lazy loading for iframes?
Yes, you can use lazy loading for iframes. Just like images, you can use the “loading=lazy” attribute to lazy load iframes. This can be particularly useful for iframes that embed videos or other heavy resources.
How can I test the performance impact of lazy loading?
You can use tools like Google Lighthouse or WebPageTest to measure the performance impact of lazy loading. These tools provide metrics like First Contentful Paint (FCP) and Time to Interactive (TTI) that can help you understand how lazy loading affects your page load time.
Is lazy loading supported by all browsers?
Can lazy loading cause layout shifts?
If not implemented correctly, lazy loading can cause layout shifts as images load and take up space on the page. To prevent this, you should specify the width and height of your images in the HTML or CSS. This reserves the space for the images and prevents layout shifts when they load.