How to Easily Lazy Load Images in WordPress (2 Ways)

Implementing lazy load for images in WordPress is a small step that can make a huge difference for your website. It’s a key practice for any high-performing site today.

This single technique directly helps with two things every site owner wants. A better experience for visitors and a nice boost in search engine rankings.

For your visitors, it means your pages feel exceptionally quick and responsive. They get to see your content almost instantly, which keeps them engaged.

Search engines like Google also notice this speed. They tend to favor faster websites, which can help your content get discovered by more people.

We want to help you get these benefits right away. Here are two easy methods to get lazy loading working on your site today.

Why Lazy Load Images in WordPress?

Lazy loading WordPress images can speed up your website and offer a better user experience.

No one likes slow websites. In fact, a website performance study found that a 1-second delay in page load time leads to 7% fewer conversions, 11% fewer pageviews, and a 16% decrease in customer satisfaction.

Search engines like Google don’t like slow-loading websites, either. This is why faster sites rank higher in the search results.

Images take the most time to load on your WordPress site compared to other web elements. If you add a lot of images to your articles, then each image increases your page load time.

One way to handle this situation is to use a CDN service like BunnyCDN, or a more simple option like Envira CDN, which is built specifically for images. A CDN will let users download images from a web server closest to them and reduce website loading speeds.

However, your images will still be loaded and affect the overall page load time. To get past this issue, you can delay image loading by implementing lazy load on your website.

How does lazy loading of images work?

Instead of loading all your images at once, lazy loading downloads only the images visible on the user’s screen. It replaces all other images with a placeholder image or blank space.

As a user scrolls down the page, your website loads images that are visible in the browser’s viewing area.

Lazy loading can be very beneficial to your WordPress blog:

• It reduces the initial web page loading time so that users will see your site faster.
• It conserves bandwidth by only delivering images that are viewed, which can save you money on WordPress hosting costs.

The release of WordPress 5.5 added lazy loading as a default feature.

However, if you want to customize how your images lazy load and also lazy load background images, then you will need to use a WordPress plugin.

Let’s take a look at how to lazy load images in WordPress using two different plugins. You can use the quick links below to jump straight to the method you want to use:

Method 1: Lazy Load Images in WordPress With WP Rocket

We recommend using the WP Rocket plugin to lazy load images in WordPress. It’s the best WordPress caching plugin on the market that lets you easily turn on image lazy loading.

Aside from that, it’s a very powerful plugin that helps you optimize your page speed without knowing complex technical terms or configuring expert settings.

Right out of the box, all of their default recommended caching settings will greatly speed up your WordPress website.

The first thing you will need to do is install and activate the WP Rocket plugin. For more details, you can see our guide on how to install a WordPress plugin.

To enable image lazy loading, all you have to do is check a few boxes. You can even enable lazy loading for videos, which will improve your site speed even more.

All you need to do is go to Settings » WP Rocket in your WordPress dashboard and click on the ‘Media’ tab. Then, you can scroll to the ‘LazyLoad’ section and check the boxes next to ‘Enable for images’ and ‘Enable for iframes and videos’.

For more details, see our guide on how to properly install and set up WP Rocket in WordPress.

Method 2: Lazy Load Images in WordPress With Optimole

This method uses the free Optimole plugin. It’s one of the best WordPress image compression plugins that lets you easily enable image lazy loading.

If you get over 5,000 visitors per month, then you will need the premium version of Optimole. For more details, see our complete Optimole review.

First, you need to install and activate the Optimole plugin. For more details, see our step-by-step guide on how to install a WordPress plugin.

Upon activation, you will see a screen asking you to sign up for an API key. You can also find this screen by navigating to Optimole in the admin menu.

You’ll need to make sure that the email address listed is correct and then click the ‘Create & connect your account’ button. Alternatively, if you are an existing user, then just click the ‘I already have an API key’ button.

You may need to wait for a few seconds while the plugin connects to Optimole. After that, the plugin will automatically start to optimize your images so that your visitors will now see the best images for their devices.

While that is happening, you can click on the ‘Settings’ tab to configure lazy load.

Here, you need to make sure the ‘Scale images and & Lazy load’ setting is enabled. This will generate images based on your visitor’s screen size and improve loading speeds.

Next, click on the ‘Advanced’ menu option and select ‘Lazyload’. On this screen, there are a few different settings that let you customize how your images will lazy load.

First, you can adjust the ‘Exclude first number of images from lazyload’ setting. This will stop images at the top of your posts or pages from lazy loading, so images above the fold will always appear.

You can set this to 0 if you want every image to lazy load.

There are a few other advanced lazy load settings in Optimole that you can check. These settings are enabled by default.

The first is the ‘Scale Images’ setting. This will scale images to the visitor’s screen size and make your page load faster.

After that, you will see the ‘Enable lazyload for background images’ setting. This will lazy load your background images, which may be the largest images on your website.

Another setting is lazy loading embedded videos and iframes. If you have a lot of embedded video content, then you will want to leave this setting on. It will load a placeholder image in place of the video. When the placeholder is clicked, the full video will load.

You can continue to customize these settings and see what works best for your website and your images.

Before you exit the plugin settings, make sure to click the ‘Save changes’ button at the bottom of the page.

Frequently Asked Questions About Lazy Loading Images

We know you might still have some questions about lazy loading in WordPress. Here are the answers to some of the most common ones we receive.

1. Does WordPress automatically lazy load images?

Yes, since the release of WordPress 5.5, basic lazy loading for images is a default feature. However, this native function doesn’t apply to things like background images or videos. For more control and to ensure all your media is lazy-loaded, we recommend using a dedicated plugin like WP Rocket or Optimole.

2. Is lazy loading good for SEO?

Absolutely. Lazy loading significantly improves your page load speed, which is a key factor for user experience. Search engines like Google favor faster websites, so improving your speed with lazy loading can give your site a nice boost in search rankings.

3. What is the best lazy load plugin for WordPress?

For all-around performance and ease of use, we recommend WP Rocket. It’s the best performance plugin on the market, and it includes a powerful and simple lazy load feature with just a couple of clicks. If you’re looking for a great free alternative, Optimole is an excellent choice that also provides robust lazy loading options.

4. Can you lazy load videos in WordPress?

Yes, you can and you should! This is a fantastic way to improve the speed of pages that feature a lot of embedded video content. Both WP Rocket and Optimole allow you to easily enable lazy loading for your videos, which replaces them with a placeholder image until a user clicks to play.

5. Should you lazy load images above the fold?

It’s generally best practice to exclude images at the very top of your page (above the fold) from lazy loading. This ensures that the first thing your visitors see loads instantly, creating a great first impression. Plugins like Optimole allow you to easily exclude the first few images from being lazy-loaded for this very reason.

Bonus Tips to Optimize Your WordPress Images

Although lazy loading will help to improve website loading speed, there are a few other ways to optimize your WordPress images for the best performance.

For example, we recommend compressing your images before uploading them to your website using a tool like TinyPNG or JPEGmini. Alternatively, you can use an automated image compression plugin such as Optimole or EWWW Image Optimizer.

It’s also important to choose the right WordPress image size and file format for your images. JPEGs are best for photos or images with many colors, PNGs are suitable for simple or transparent images, and GIFs are only for animated images.

We hope this article helped you learn how to lazy load images in WordPress. You may also want to see our tutorial on how to easily optimize images for the web without losing quality and our expert picks of the best file upload plugins for WordPress.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.