How to Lazyload Background Images in WordPress

Lazy Loading Background Images WordPress

Heads up: This page may include affiliate links. Read the full disclosure.

A fast loading website is an integral part of building websites nowadays as it may help site visitors stay and explore more. Lazy loading images is one of the techniques which may result in better performance.

One of the easy plugins to enable lazyload of background images is called Lazyload Background Images.

1. Lazyload Background Images

Lazy Load Background Images Plugin

In the plugin settings, you can also add the selectors for elements that contain background images. By default, the plugin will lazyload background images that are contained in inline CSS.

To enable background images to lazyload, navigate to wp-admin, and get into “Lazyload Backgrounds”

Lazy Load Background Images Plugin

2. Lazy Loader

Another plugin option for lazyloading of background images is to use the Lazy Loader plugin.

Lazy Loader WordPress Plugin

After installing the plugin, it will add a lazy load option into Settings -> Media settings as below:

Lazy Loader WordPress Plugin

If you are using the WP Rocket plugin for full page caching and minification, it will lazyload background images by default that are applied to inline HTML. If the WP Rocket plugin causes issues for specific images, you can disable it from being lazyloaded.

Being able to lazyload background images will improve the site experience for visitors.

Useful Links

Looking for something?

Privacy laws apply to businesses that collect personal information. Since no personal information is collected by the MainWP plugins, no privacy laws apply to the MainWP plugins. This includes GDPR, UK DPA 2018, PIPEDA, Australia Privacy Act 1988, LGPD, PIPL, and other privacy laws.
Donata Stroink-Skillrud
Donata Stroink-Skillrud
President of Agency Attorneys