Boost Your Page Load Speed: Using Lazy Loading for Images

on 14 Sep 2023, by Bogdan, in Blog, Cloud, Guides

by Bogdan

If you want your website to load fast and stay fast, then lazy loading images is the best way to go about this.

Image-heavy websites with long-scrolling pages can use lazy loading for images to control how image content appears on web browsers as the user interacts with their sites. Doing this will enhance your page’s performance and speed and create a positive, lasting impression on users who demand quick access to a site’s content.

In this article, we’ll cover the following:

What lazy loading is
We’ll have a look at lazy loading images in action
The benefits of lazy loading images on your website
How to lazy load an image

Let’s begin this journey with the definition of lazy loading, and then its significance.

What is lazy loading?

In general, lazy loading is a technique that websites use to optimize page load time. This technique allows you to display (or, load) page content that is required immediately when a user visits your website. The remaining page content awaits loading only when the user needs it.

This implies the rest of the page’s content is only displayed if a user scrolls down a page or interacts with them. This process is called lazy loading because it delays the loading of a page's content until it is required.

Some of the most common resources that are lazy-loaded include images, videos, and other multimedia elements. For the purpose of this guide, we’ll show you how to lazy load an image. Feel free to jump to this section to lazy load your images on your website.

Lazy loading is a common feature in websites with long-scrolling web pages. You’ve likely seen it before when in the Google Images section or on news websites. Let’s have a look at lazy loading in action.

Then, as scroll further down the page, Google loads placeholder images instead of real images. These placeholders (hidden content) take less time to load than fully rendered content. The real images quickly load when their placeholder comes into view (i.e., when you scroll down).

If you’ve noticed, lazy loading for images is particularly beneficial for image-heavy websites (or even sites with video galleries).

The benefits of lazy loading images on your website

The following are some of the benefits of lazy loading images on your website:

Faster initial page load time

Lazy loading speeds up the initial page load by postponing the loading of non-visible images; images that are not in the above-the-fold area. This is part of the web page that is shown before scrolling. When your site loads faster, it results in:

Improved user experience – Users appreciate a smooth and responsive browsing experience specifically on image-heavy websites. Using lazy loading for images allows images on your website to load quickly as users scroll, creating a seamless experience right from start to finish.

Reduced bounce rate (and increased user engagement) – Impatient users are more likely to leave a page that doesn't load quickly.

Lazy loading helps reduce bounce rates by ensuring that the core content and functionality appear promptly, encouraging users to stay on your site longer and explore further.

Enhanced SEO – Lazy loading images on your website will also have a positive impact on your search engine rankings. The faster your website loads, the higher it ranks on search results.

Reduced data usage (Bandwidth conservation)

Since lazy-loaded images(offscreen images) are loaded until they’re required, site users will consume less data when they visit your website. This is beneficial for both you and your site visitors. You’ll pay less for loading fewer items and your users won’t need as much data to load your webpages. Even on slower internet connections, your website is likely to perform at its best.

Efficient use of server resources

Since the server doesn't have to deliver all images upfront, it can handle more simultaneous requests from users, improving the overall scalability and reliability of your website.

Works well with infinite scrolling

As in the Google Images example, lazy loading is particularly useful when implementing infinite scrolling on websites or single-page applications. Social media sites do this all the time to grab our attention.

This technique ensures that additional content, such as images, is fetched and displayed as users continue to scroll, creating a seamless and uninterrupted browsing experience.

Flexible content management

Lazy loading also offers flexibility for content creators and website administrators. You can freely add and update content with high-resolution images without being overly concerned about performance issues, as the images load only when necessary.

It’s now time to lazy load our images.

How to lazy load an image

Images are displayed on a web page as part of the HTML structure or as CSS background images. In this section, we’ll discuss very briefly how you can lazy load images in HTML and CSS without being too technical.

Lazy loading images in HTML using the loading attribute

The default behavior of all inline images on an HTML page is to load as soon as the user visits your page.

Setting the loading attribute to lazy value will tell the browser to load the image immediately if it is in the viewport, and to download other images only after the user scrolls near the <img> elements.

This attribute can also be added to <img> elements, and also to <iframe> elements.

Note: This technique is called browser-level lazy loading and is supported with modern browsers such as Chrome, Safari, Edge, and Firefox. However, <iframe loading="lazy"> is currently not supported in Firefox and Safari. This means that these images will be downloaded as soon as the user opens the page on Firefox or Safari, even if the loading attribute is set to lazy.

Lazy loading images in CSS (background-images)

Images can also be added to a web page using the CSS background-image property (and other properties). However, the loading="lazy", which is effective for inline images in HTML, don't work for background images.

When you want to implement lazy loading for background images, you'll need to use JavaScript to achieve this functionality.

Using JavaScript allows you to set the background image for the target HTML element when it’s about to become visible within the viewport. You can do this by listening to the Intersection Observer API, which helps you track when an element is in the viewport.

The target HTML element refers to the specific element to which you want to assign the background image when it becomes visible in the viewport.

You can create it as follows <div class="lazy-background"></div>. Then, use CSS to define the styles for the element with the background image, including its dimensions, positioning, and any other properties as needed.

Using lazy loading libraries

A more streamlined way to apply lazy loading for images is by using lazy loading libraries. Some of the popular lazy-loading libraries include:

Vanilla-lazyload – which is a lightweight and customizable option for lazy loading images, background images, videos, iframes, and more. It uses Intersection Observer, supports responsive images, and enables browser-level lazy loading.

React-lazyload, on the other hand, is a React-specific lazy loading library that doesn't use Intersection Observer.

Lozad.js – is another lightweight library that supports various content types, including images and background images. It offers options for customizing loading animations and events.

jQuery Lazy – is good for projects that use jQuery. This option provides lazy loading functionality for images, videos, and other elements. Plus, it's compatible with older browsers and jQuery versions.

Conclusion

Using lazy loading for images is beneficial for image-heavy websites, websites with long-scrollable pages, or when you want to implement infinite scrolling for your website. This technique isn't limited to these scenarios only. It's a versatile technique you can also use to enhance site performance and speed, optimize your user experience, and conserve server/bandwidth resources.

However, if you want a fast & professional website on the go, with lazy loading included by default, you can use Brizy page builder. Brizy is a web page builder that enables you to create stunning websites that meet your needs in no time. No coding knowledge is required.

This page builder implements all the modern web development practices including lazy loading to help you build lighting-fast websites quickly.

Get started today with Brizy Cloud and churn out professional websites effortlessly for your clients in no time.

Article by Bogdan

Co-founder & Head of Design, Bogdan has a passion for everything that works great and looks awesome. Guilty for most of the UI and UX around this place, you can say "Hi" to him at bogdan at brizy dot io

Switch to Brizy Builder and you will get automatic Lazy Load with all websites.

Brizy Cloud is built with a focus on delivering fast-loading and responsive websites. The platform employs various techniques and coding practices to minimize loading times, reduce server requests, eliminate render blockers and optimize website assets, resulting in better overall performance. This is crucial as faster-loading websites enhance user experience, improve search engine rankings, and increase user engagement.