A Guide to Lazy Loading Images

lazy loading images, man/polaroid photo hybrid getting out of bed

As you’ve already known by now, images are essential for every website or digital content today.

Whether it’s for an ad banner, blog article or website logo, building a site without using any images is going to be a real engagement killer.

As technology improves every day, so does the needs and expectations of web users. The demand for high quality, high-resolution images continues to grow each day.

To satisfy this demand, it is no longer enough just to provide simple or low-quality images for your website.

Unfortunately, images that have large file sizes are often the biggest culprit to enormous page sizes.

When your page size gets too big, your website starts to load slowly, and it can take a toll on your server bandwidth and your traffic.

According to the latest HTTP Archive data, the median page size on desktops is 1511 KB. Images alone can take up to 45% of the total page size.

Since you can’t do without images, you’ll need to find an alternate solution to make your business website load really fast for your users.

In this guide, we will look at what lazy loading images are – a method of making your page load time shorter, reducing your page size while still retaining all the high-quality images on your page.

What exactly is Lazy Loading Images?

When we think of the word “lazy,” we will think of procrastination or the act of avoiding work for as long as we can.

Lazy loading operates in a similar fashion – by deferring resources that are not needed for as long as possible.

Lazy Loading Images are the techniques in web development that defer the images on a page to load at a later point in time – the photos only starts loading and showing up only when they are needed.

When a user is reading the top of the page of an article, he does not need to see the bottom of the page.

And since the bottom cannot be seen, with lazy loading images enabled, the pictures at the bottom of the page doesn’t start loading, until the user begins scrolling near the bottom.

If the user never scrolls to the bottom, the images never get loaded, since it won’t be visible the user.

This allows the page to perform much smoother and load more quickly because it doesn’t need to load any resource-intensive assets, making for much more pleasant user experience.

Why bother with lazy loading images at all?

There are 2 key advantages to implementing lazy loading images:

1. Performance Improvement

The is arguably one of the most crucial factors in operating a website – to provide better performance and short load time for your users.

Since lazy loading differs resources until they are required, you are reducing the number of image requests.

Having lesser resource requests mean fewer data to download and lesser competition for network bandwidth for every user visiting your website.

This allows your user’s device to process your webpage much faster, creating a more enjoyable user experience and a longer user engagement time.

2. Cost reduction

The second benefit for you is regarding delivery costs.

When it comes to assets delivery, including images, it is usually charged the number of bytes transferred.

And since the lazy loading image isn’t visible, it never has to load. Thus, you can drastically reduce the total bytes delivered on the page.

When it comes to users that bounce off from your web page or interact only with the top portion of the page, you’ll see a significant decrease in bytes transferred from your delivery network, and ultimately a reduction in delivery costs.

Which images can use lazy loading?

The basic premise of lazy loading is simple enough – don’t load anything that is not needed right now.

For images, it usually translates to, as long as an image isn’t visible to the user upon landing on a page, it can be lazy loaded.

Once the user scrolls down the page, the image placeholders start coming into the view of the user, you initial the image loading.

To find out what images are suitable candidates for lazy loading, you can use the Google Lighthouse tool where there is a section that is dedicated for offscreen images.

Making a smart combination of performance and user experience with lazy loading is vital to making it work smoothly with little impact on the users’ experience.

Creating an Enhanced User Experience with Lazy Loading images

Lazy loading enables a significant performance benefit for any business website that depends on thousands of images.

For a digital business website that showcases hundreds of product images on a single page, lazy loading can provide a significant boost in loading time while decreasing the bandwidth consumption.

But still, most business websites don’t opt to implement lazy loading. They feel that it goes against delivering a great user experience – the image placeholder is unpleasant, the deferred loading takes too long, etc.

Once you have properly optimised your lazy image loading, you can improve the user experience of your users.

1. Choosing the right image placeholders

A placeholder is what appears in the place of the image container.

It only goes away until the actual image is loaded. Usually, we see most lazy loading sites use a solid colour placeholder for images or a single static image as a placeholder.

You can do better to provide a more pleasant user experience by using an image placeholder that is more relevant to your website or business:

a. Using a dominant colour placeholder

Instead of using a fixed colour for the image placeholder, you can use a placeholder in the dominant colour from the original image, and use that as a placeholder.

You can usually see this in effect in Google image search results or in Pinterest.

b. Low-quality image placeholder (LQIP)

We can build upon the above idea further through the use of an image with a tiny file size, which is essentially a blurred version of the original image as the placeholder.

This creates a better aesthetic effect for your website as it looks better than a solid colour.

An LQIP also gives the user a vague idea about what to expect in the actual image. If they have figured out what the image is supposed to be, they can quickly scroll away to the next section, thus deferring precious resources yet again.

Another added benefit is that LQIP can give the user the perception that the image loading is in progress, which improves the perceived loading experience.

You can usually see this technique being applied to sites like Facebook and Medium.

2. Creating a buffer time for image load

Usually, users tend to scroll really fast through the page when they are looking for the information they want, and this can create a problem in the user experience.

The image requires some time to load and appear on the screen, when there is not enough time to load, the users will be greeted with a placeholder.

In situations like this, the user has to wait for a few milliseconds before the actual image shows up. This small and seemingly insignificant delay can have a detrimental effect on the overall user experience.

To solve this problem, you can introduce a buffer for the images to load.

Instead of loading the image just when the user starts seeing the placeholder, you can set the image to load the images before that such as about 300px away from reaching the placeholder. This added buffer provides additional time for the image to load.

3. Avoiding content shifting with lazy loading

When lazy loading is enabled, there is no image present on the webpage.

Since there aren’t any images, the users’ web browser doesn’t know the dimensions of the image that is to be displayed.

Then, when the image finally gets loaded, the browser would resize the website layout to accommodate the image.

This unexpected adjustment in the layout causes other elements on the page (such as the text and the header bar) to move around. This is called content shifting.

Since the content starts shifting around without the user’s control, it can create a rather unpleasant experience for a user, as the page content moves unpredictably when the user is reading or watching the content.

This situation can be avoided simply by specifying a height and/or width of the lazy loading image for your webpage so that the browser can display the webpage with a known height and width.

And when the image finally loads, the rest of the website content around that image doesn’t shift around.

4. Lazy loading all the images

This is another mistake that website developers tend to make – by making all images on the page lazy loading.

While this may improve the webpage load speed significantly, it can also result in a somewhat poor user experience, since even the images at the top won’t show up.

Using this general principle, you can identify which images should be lazy loaded.

a. Any image that is present at the beginning of the webpage

This applies to any of the header images, marketing banners, logos, etc. any images that the user sees as soon as the page loads. Do note that smartphone and desktop devices have different screen sizes, which means the number of visible images that the user see at the beginning will be different. You’ll need to take into account the device type to decide what images to load up front and which ones you should lazy load.

b. Any image that follows shortly after the beginning of the webpage

Since there won’t be a lot of buffer time for the subsequent images to load, you should keep them loaded up front too to prevent images from being not visible to the user.

c. If the page is short or has only a couple of images

When the page is short or has only a few images on it, there is barely any significant advantage to the end user regarding performance.

Implementing the additional Javascript for lazy loading will offset the gain from lazy loading such a small number of images.

Javascript dependency of Lazy Loading

For lazy loading to work on your users’ device, Javascript needs to be available on the user’s browser.

While most modern web users should already have Javascript execution enabled in their browser since it’s a necessity for almost all websites these days, you still have to provision for users have their Javascript execution disabled for their browsers, or they are using an incompatible browser.

You could simply display a message on your website telling your users that the images aren’t loading because they need to switch to a modern browser or enable Javascript, or you can use the noscript tag to create a usable experience for these users as well.

How to test if lazy loading works on your website?

Once you have integrated lazy loading into your website, it’s time to take it for a test drive to see if the lazy loading images are functioning the way they should be.

The simplest way is to fire up Developer Tools in Chrome browser. Go to Network Tab > Images.

Once you’ve refreshed the page for the first time, only the images that are to be loaded up front should get loaded up.

As you start scrolling down the page, you can then see other image load requests get triggered and loaded.

Over at the waterfall column, you can also monitor the image loading times for all the lazy loaded images. If the load times are too long, then you’ll need to start tweaking the Javascript to fix the issues.

Another way to check your lazy loading images is to run the Google Chrome Lighthouse test on your page, then look for suggestions under the “Offscreen images” section.

In conclusion

When lazy loading is implemented correctly, there will be a significant improvement in the performance of your web pages.

You’ll also see a sizable reduction in page size and delivery costs because you are cutting down on the additional resources need to be loaded up front, while still preserving the essential content on your webpage.

Your users would enjoy this improved experience with the faster loading pages, and they will love your website for it.

About Murray Dare

Murray Dare is a Marketing Consultant, Strategist and Director at Dare Media. Murray helps UK businesses find better ways to connect with their audiences through targeted content marketing strategies.