The Image Lazyloader Drupal module: lazy images, efficient website!


Good news: many studies confirm that laziness is a natural human reaction that helps you save energy. A nice justification for lazybones — which we all are sometimes. However, there is a good reason to overcome your yawning and keep reading! We’ll discuss how the laziness of images can save your website’s “energy” and increase its loading speed to please both your visitors and search engines. And we’ll describe a tool that deals with it and does the whole job for you. You see, laziness is really a productive engine for new inventions ;)

Want good website speed? Pay attention to your images

First of all, it should be mentioned that image optimization is one of a website’s performance milestones. When doing website performance audit, we often find issues with images among the reasons for a website’s slowness.

Luckily, everything can be improved. There is no need to choose between making your website attractive and making it fast — you can enjoy both, due to the solutions offered by Drupal.

Easy image optimization with the Image Lazyloader Drupal module

The Lazyloader module offers a smart way of dealing with images, greatly admired by developers, which is called lazy loading. Essentially, it doesn’t load the images when they are not directly displayed in anyone’s browser window.

The idea behind it is smart and simple at the same time. You can find it everywhere. Rotating doors only rotate when someone goes through them. Automatic hand dryers only turn on when someone puts their hands underneath. Then why cannot images only load when they are in the view of a website’s visitor? That’s exactly what the Lazyloader module does.

The module can increase web page loading speed by several times. It is an especially useful solution for websites with multiple images. The Lazyloader automatically lazyloads them all, irrespective of the amount.

Hints on working with the Lazyloader module

The module’s maintainers recommend the following installation steps:

  • Download and install the Lazyloader module, as well as the Libraries module which is a dependency for 2.x branch, in sites/all/modules/contrib
  • Download the echo library and put it here: sites/all/libraries (echo.js and echo.min.js must be found in sites/all/libraries/echo/dist)
  • Enable the Lazyloader module
  • Clear the cache

These settings allow you to enable and disable lazyloading (which is useful for testing purposes). You can set the image distance from the viewable screen part and choose the placeholder image. The special loader icon shows if the images are not yet fully loaded. It’s also possible to choose excluded pages that will avoid the lazy loading process.

For better results, we recommend using Drupal 7.12 or higher. You should also give the Lazyloader a good testing before enabling it on the production website.

Similar modules include Block Lazyloader, Node Lazyloader, Lazyload, Jail, and Lazy Image Loader.

There can be some issues with lazyloading custom-rendered images, but Drudesk will help you with them.

Too lazy to deal with the Lazyloader module? ;) Save your energy by contacting Drudesk! Jokes aside, if you need a hand with this or any other website optimization issue, our team is here for you!

Recent Posts

Drudesk’s visit to DrupalCamp Kyiv 2017: plenty of vivid impressions

Drudesk’s magic ability is to always find a solution to any customer’s task — big or small, complicated or simple. Sometimes, these solutions are pretty obvious. This was the case with one big task we had for ourselves. Task: polishing our Drupal skills to perfection.

Control your projects as easily as you chat to your friend

We love to say that good website support is meant to relieve you of any troubles, so you can relax in a comfortable chair and see all your issues fixed magically.

About us and this blog

Request a free quote
Our friendly Help Team can be reached Monday through Friday, from 9am to 6pm, Eastern European Time Zone.

Contact now

Get new blog posts by email: