How to Lazy Load Images With 4 Easy Ways

21 0
SHARES
Facebook
Twitter
Pinterest
LinkedIn

Why are lazy load images so good for your website, and what is the most efficient way too lazy load images? Lazy load images that are not in the viewport can improve the performance and user experience. This is all the detailed guide to lazy loading of images.

Images are essential to all websites and applications today. Whether it’s a marketing banner, a product image, or a logo, you can’t imagine a website without images. Unfortunately, the image’s size nowadays is large and is the number one cause of slow page loading times.

What is Lazy Load Images Means?

A picture is worth a thousand words, so it’s no wonder many websites rely on graphics to convey their messages. It’s not a bad thing, actually, since we’re mostly visual types of users.

Still, the number of images used on a website directly impacts the page load speed. To face this challenge, web designers use the lazy load images technique.

Since browser environments and implementation details can vary across browsers and devices, it is best to use a tried and tested library for lazy loading. Here is a list of popular libraries and platform-specific plugins that will allow you to implement lazy loading with minimal effort

yall.js (Yet Another Lazy Loader)

  • It uses Intersection Observer and falls back to event-based lazy loading.
  • Supports all major HTML element types but not background-images.
  • Works on IE11+ as well.
  • Read the detailed guide below.

lazysizes

  • Very popular and extensive functionality.
  • Supports responsive images srcset and sizes attribute as well.
  • High performance even without Intersection Observer.

jQuery Lazy

  • A simple, jquery based lazy loading library.

WeltPixel Lazy Loading Enhanced

  • A Magento 2 extension for lazy loading images.

Magento Lazy Image Loader

  • A Magento 1.x extension for lazy loading images.

Shopify Lazy Image Plugin

  • A Shopify extension for lazy loading images.
  • It is paid, though.

WordpPress A3 Lazy Load

  • Image lazy loading plugin for WordPress.
  • Read the detailed guide below.

Why do You Need to Use Lazy Load Images?

Lazy loading is a web-design technique that intentionally postpones the loading of offscreen images until a user scrolls down the page. Meanwhile, placeholders are used.

Now you can lazy load images quickly using these simple ways. If you want to fix your site core web vitals statistics and increase site speed, then it has become important that you lazy load images that your site do not load all together in one go and only those images which need to be loaded above the page fold load first and do not slow down rest of the page loading speed.

You may also like to read:

1. Add JS Libraries Scripts

How To Lazy Load Images
Lazy Load Scripts – How To Lazy Load Images

Сompared to writing code from scratch, grabbing a JS library requires the minimum effort to lazy load images easily. If you don’t really care what’s inside as long as it does the job for you, here’s a list of JS libraries recommended by Google to lazy load images:

Add any of the above scripts in the footer of your web pages to lazy load images. First, you need to download it. It will load the script on all your pages.

Here is what typically the code lazysizes will look like:

<script src="lazysizes.min.js" async=""></script>

You can either upload it on your server or use a CDN. You can also source the latest code from cdnjs and use the power of CDN to deliver the script faster across the world or use your own CDN to lazy load images.

<script src="https://cdnjs.cloudflare.com/ajax/libs/lazysizes/5.2.2/lazysizes.min.js"></script>

Why Lazysizes When There are Many Scripts?

It is an SEO friendly lazy loader for images as it does not block images from Googlebot even if they are not scrolled and loaded. And of course, there are other high-performance features that you can read up on their site.

Even Google recommends it in several of their support pages for Lighthouse and other core vital speed tests to lazy load images.

2. Edit Image Src Codes

The script will only work on those images where the image src has been replaced by image data-src, and this will help the script convert these images to image src when these images are loaded upon page scroll.

<img src="image.jpg" />

You need to change it by adding a data- as follows to lazy load images.

<img data-src="image.jpg" />

If you are like us and use srcset to make images sharper on 4K screens, you need to replace it with data-srcset as well.

<img src="image.jpg" srcset="image2x.jpg 2x" />

will be edited to

<img data-src="image.jpg" data-srcset="image2x.jpg 2x" />

3. Add LazyLoad Class

In this next step, you need to add a specific class to all the images, which will help the script identify that these images need to be lazy-loaded, and then it will work like magic.

The class to be added is lazyload, and you need to add it to whichever images you want to lazy load. Else, the script will not defer the loading of your images to lazy load images.

<img data-src="image.jpg" class="lazyload" />

and the code with srcset will look like this

<img data-src="image.jpg" data-srcset="image2x.jpg 2x" class="lazyload" />

So that’s it.

Now you can quickly scroll your long web page with images and see how images load delayed with page scroll to that area. You can also use site speed tests and see for yourself that those images are no longer counted in your page load times as they are not loaded.

What if You Cannot Edit all Image Tags? 

If you are using WordPress, it would be better to use a WordPress plugin to change image src codes in bulk automatically. Most site optimization plugins now have the lazyload images script available, and you can load it in a click.

More interesting articles for you:

4. Use a Plugin if You Are Using WordPress

There are a couple of options out there that can give you lazy loading. The most popular solutions for lazy load images are:

  • Lazy Load by WP Rocket
  • a3 Lazy Load
  • Optimole

All these plugins will handle the lazy load images for you automatically. Each also comes with some nice side features to lazy load images.

Lazy Load by WP Rocket

How To Lazy Load Images
Lazy Load By WP Rocket – How To Lazy Load Images

You can lazy load thumbnails, all images in post content, or a widget text, avatars, smilies, and iframes. No JavaScript library such as jQuery is used, and the script weight is less than 10KB.

Lazy Load by WP Rocket also lazy loads of YouTube videos and replaces them with a thumbnail.

How To Lazy Load Images

Here is an example to put in functions.php files that disable lazyload on posts:

add_action( 'wp', 'deactivate_rocket_lazyload_on_single' );
function deactivate_rocket_lazyload_on_single() {
    if ( is_single() ) {
        add_filter( 'do_rocket_lazyload', '__return_false' );
    }
}

You can also replace YouTube iframes with a preview thumbnail to speed up your website’s loading time.

a3 Lazy Load

A3 Lazy Load is a Mobile-Oriented, very simple to use a plugin that will speed up sites page load speed. The more content-heavy your site, the better the plugin will perform, and the more you will see the performance improvements. See this demo of a page with 1,000 images (yes, 1,000 images) to load.

Images are the number one element that slows page load and increases bandwidth use. From the a3 Lazy Load admin panel, turn load images by a3 Lazy Load ON | OFF. For more flexibility when ON, you can choose to ON | OFF lazy load for images in:

  • Post, Pages, and Custom Post Types (All Content Areas)
  • Widgets (Sidebar, header, and footer)
  • Apply to post thumbnails
  • Apply to Gravatars
  • Fully compatible with WordPress embed post on any site feature introduced in version WP version 4.4
  • It makes embed post load much faster

Optimole

How to Lazy Load Images With 4 Easy Ways
Optimole – How to Lazy Load Images

Optimole is the all-in-one solution to all of your image optimization needs. Optimole makes it easy to clean up your heavy images and bloaty pages with lazy load images with full automation and a range of revolutionary features.

What makes Optimole so special?

  • Smaller images. Same quality
  • Fully automated; set and forget
  • Supports all image types
  • Supports both Retina and WebP images
  • Serves images from a global CDN for free
  • Optimizes based on the visitor’s actual device (no more guesswork and width estimations)
  • Full support for page builders like Elementor
  • Lazy load without jQuery (better)
  • A fully functional free version

So, if you have been looking for one plugin that provides lazy loading with a CDN and perfectly sized images, then Optimole is perfect for you.

Are There any Benefits of Native Lazy Loading?

Sites with a ton of images can take forever to load. For every image, that’s another HTTP request, and more time, your users have to wait in frustration while pages load slowly.

FAQs About How to Lazy Load Images

  1. How does lazy loading work?

    When someone adds a resource to a web page like an image, video, etc., the resource references a small placeholder. As a user browses the web page, the actual resource is cached by the browser and replaces the placeholder when the resource becomes visible on the user’s screen.

  2. How do I know if lazy loading is working?

    You can check to see that a module is indeed being lazy-loaded with the Chrome developer tools. In Chrome, open the dev tools by pressing Cmd+Option+i on a Mac or Ctrl+Alt+i on a PC and go to the Network Tab.

  3. Does lazy loading affect SEO?

    Lazy loading images improves the user experience by saving bandwidth for important content first. Properly lazy loading your images does not prevent them from being indexed. And does not affect your website rankings.

Conclusion – How to Lazy Load Images

Lazy loading is just one technique you can use to optimize your WordPress website. However, it can impact site speed if you use a lot of images and videos.

When building a website, consider lazy loading the assets when they are needed. This is both good for the user and the site’s servers and CDNs.

21 0
SHARES
Facebook
Twitter
Pinterest
LinkedIn

Want more stuff like this?

Every week we’ll send you advice, tips, and in-depth tutorials free of cost!

Don’t worry; we don’t spam. You can unsubscribe here anytime.

Leave a Comment