Skip to content

Lazy Loading Images: Complete Guide Plus 3 Ways to Implement It

As functionality and interactivity has steadily increased on the web, so too has there been a steady increase in web page size over the years. More specifically, in the period between 2012 and 2022, the size of web pages increased by 184% for desktop sites and an astounding 420% for mobile sites [1]!

What can you, as a website owner or manager do about it? Well, a little something called lazy loading images is one of the best solutions you can use to combat this.

In this guide, we’ll walk you through all of the intricacies of lazy loading images, 🖼️ and we’ll also show you different ways of how to implement it.

Let’s start with the table of contents of what’s to come:

Why lazy loading matters?

The huge payload of a web page consists primarily of images, scripts, stylesheets, fonts, and videos. However, images take up the majority of the weight of a typical web page. On the flip side, images are also critical to the design of a web page, so it’s not like getting rid of them is a viable solution.

Without any optimization, the user’s web browser downloads all the resources before rendering a page completely. This leads to increased load times, which can draw people away. WooCommerce estimated that for every 100ms of page speed improvement, an ecommerce website can increase revenue by 1% [2].

In a scenario like that, doing whatever it takes to optimize your load times makes a lot of sense. Since images are the primary contributor to web page size, starting with them is a good idea. This is where lazy loading comes into play.

What is lazy loading?

To understand how lazy loading works, here is a quick animated GIF demonstrating how images are rendered on CodeinWP.

Lazy Loading Images Demo.
Lazy loading demonstration on CodeinWP

When the page loads, all the images are not downloaded immediately. When you scroll down to an image, you first see a blurred version of it. This blurred image is a low-definition version of the final image, at a fraction of the size. The actual image loads in the background. This phenomenon of deferring downloading and rendering the image until a user scrolls over it is precisely what’s called lazy loading.

Although “lazy” generally has a negative connotation, lazy loading is actually a positive practice and leads to lowering page load times by optimizing your site overall.

⚠️ Note. In this post, we look at the process of lazy loading images, but lazy loading is not confined to just images – you can use the same idea when rendering any other resource like videos and fonts.

Benefits of lazy loading

As loading time of a web page is a major contributor to abandonment, lazy loading images can significantly lead to an uplift of users that stay on the page until it loads. The domino effect from this is a potential increase in sales or conversions.

The other significant benefit of lazy loading images is lowered server bills. You serve only those images that the viewer scrolls through, and save on bandwidth for parts of the page that were not viewed. As images form a dominant part of the page weight, this could lead to potentially lower server costs.

Loading all the images up front is potentially detrimental for your readers too. If the user is on an unlimited data plan for the web, it probably should not matter. However, on plans with limited data, you are saving your viewer’s data by lazy loading images.

What to consider when lazy loading images

Now that you have decided to implement lazy loading on your website the right way, let us go over a few key considerations on how to get it done.

Identify the images you want to lazy load

Not all images are ideal for lazy loading. For instance, you wouldn’t want to lazy load the ones that are integral to the structure of your design and must be loaded in order to render everything correctly.

Only the images that are off screen and do not contribute to the page’s structure should be considered for lazy loading. Typically, these are images in the <img> elements that appear in the body of the page.

Pick your image placeholders

The next thing to consider is the intermediate image or color that should be shown when the image is being loaded once a viewer has scrolled over it. The image loading time depends on how large the image is, and can even take up to a few seconds. Therefore, you must consider what you would prefer to use during the load time.

There are two directions that developers usually take in this regard:

  • Use the dominant color of the image as a background
  • Use a low quality version of the image
low-res placeholder.
An example of low quality versions of images as placeholders for lazy loading

The right choice here depends on the design of your site and what you would prefer to be shown to the user when waiting for the image to load.

Although one technique is to load images as soon as they enter the view port, you may want to consider adding a buffer time before that takes place – so that the user never sees the placeholder.

Beware of altering page structure when loading images

Before an image is loaded, it might be shown using 0 px dimensions. This is not ideal for maintaining your design structure.

This can easily alter the layout of the page and position of the text. A simple solution is to add the correct dimensions to the image right away – this ensures the size of the image element remains the same after load.

With the above considerations out of the way, let’s now look at how we can actually implement lazy loading on a WordPress site.

Option 1a: Use native lazy loading

When WordPress released version 5.5, native browser lazy loading support for images was integrated into the core WordPress files. In practical terms, this means that as long as you are using WordPress version 5.5 or higher, then you technically don’t have to do anything to activate the lazy load WordPress feature.

There are a few caveats though. (Aren’t there always? 🤷)

To begin with, the native lazy load feature is dependent on the visitor’s web browser supporting the loading attribute, which you’ll be happy to know is supported by most major browsers. With that said, most does not mean all. There are still approximately 10% of users who may not be able to take advantage of the WordPress native lazy loading feature, due to their browser’s limitations.

Moreover, the native lazy loading feature does not offer much control over how images are loaded, such as the ability to use a static placeholder image or exclude certain key images.

To ensure 100% lazy loading support and have more control over the process, it is recommended to use a dedicated WordPress lazy loading plugin for image optimization. We’ll cover that in option two.

Option 1b: Implement lazy loading from scratch

If you are:

  • Using a WordPress version that is below 5.5
  • Don’t intend on upgrading to the latest version of WordPress (not recommended)
  • Don’t want to use the lazy-loading plugin we’re going to recommend in the second option below

Then you’ll need to enable lazy loading from scratch. We must issue a disclaimer here though:

This option is only recommended for those of you who are comfortable with JavaScript.

Ideally, you’ll need to take the following steps:

  1. Prevent image loading during page load: When you specify the URL or path of the image in the src attribute of the <img> tag, the image will be downloaded by the browser during page load. To prevent the browser from downloading the image, you need to specify the location of the image in the data-src attribute of the <img> tag instead.
  2. Register event handler functions in JavaScript to check for elements on two events: loading and scrolling.
  3. When an element comes into the view port, load the value of the data-src element into the src element, which triggers the browser to load the image.

Alternative: Use the intersection observer API

A simple implementation of this process has been explained by Robin Osborne.

The intersection observer API helps identify DOM elements that are in the view port at any given point in time. This is a cleaner way of implementing lazy load without writing event handler functions. The number of lines of code to implement lazy load goes down considerably too. However, browser compatibility remains an issue.

The Google Developers Blog explains the implementation of intersection observer API through this CodePen demo.

Option 2: Use a WordPress plugin

There are a couple of options out there that can activate lazy loading, but the best one in our opinion is:

This plugin will disable the native lazy loading feature for you automatically. It will override it with the more customized lazy loading settings that you’ll choose inside the plugin itself.

In addition, Optimole gives you rock-solid image optimization (as tested here) with quite advanced features. For instance, it gives you dynamic resizing and quality adjusting based on the user’s screen size and the strength of their internet connection.

It also automatically loads your images in webP format unless your site visitor’s browser doesn’t support it. In which case, Optimole will default to the original file type (jpeg or png).

To activate lazy loading, just install the plugin and enable the feature in the plugin’s control panel:

Optimole for Lazy Loading Images.

Conclusion 🧐

This post explored the need and benefits of lazy loading images. We also discussed three different ways of implementing lazy loading on a WordPress website:

  • As long as you have WordPress version 5.5 or higher installed you can rely on native lazy loading
  • If you have a pre 5.5 WordPress version installed and you also have intermediate proficiency in JavaScript, then you can implement lazy loading from scratch
  • For a one-click solution for lazy loading images on your website with more control over your settings, you should go for a plugin such as Optimole

What do you think of lazy loading? Have you tried using it to improve the performance of your website?

Don’t forget to join our crash course on speeding up your WordPress site. Learn more below:

Yay! 🎉 You made it to the end of the article!
Shaumik Daityari

0 Comments
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...