Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Cup
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editorial Note: We earn a commission from partner links on WPBeginner. Commissions do not affect our editors' opinions or evaluations. Learn more about Editorial Process.

Do you want to learn how to lazy load images in WordPress?

Lazy loading allows your website to only load images when a user scrolls down to a specific image, which reduces the website load time and improves your site’s performance. Many popular image-heavy sites use lazy loading to boost website speed and performance.

In this article, we will show you how to easily lazy load images in WordPress, step by step.

How to Easily Lazy Load Images in WordPress

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.

Strangeloop case study

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. 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’.

Enabling Lazyload in WP Rocket

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

Note: If you are using Siteground as your WordPress hosting provider, then you can use the free SiteGround Optimizer plugin that has similar lazy loading features.

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.

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.

Sign Up for an Optimole API Key

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.

Make Sure Optimole's Lazyload Setting Is Enabled

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.

Optimole's Advanced Lazyload Settings

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.

Further Advanced Lazyload Settings in Optimole

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.

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 web design software.

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.

Disclosure: Our content is reader-supported. This means if you click on some of our links, then we may earn a commission. See how WPBeginner is funded, why it matters, and how you can support us. Here's our editorial process.

Editorial Staff

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

The Ultimate WordPress Toolkit

Get FREE access to our toolkit - a collection of WordPress related products and resources that every professional should have!

Reader Interactions

18 CommentsLeave a Reply

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Dick Sijtsma says

    Hi there,

    during the process of lazyloading (I’m using WP Rocket) there is a short time a placeholder showing for the images. In my situation (Google Chrome) this placeholder has a purple color. Is there a way to influence this color? Or is this a browsersetting?
    Thanks!

    • WPBeginner Support says

      You would want to check with WP Rocket for their up to date method for modifying their placeholder.

      Admin

      • Dick Sijtsma says

        Thanks!
        But it was Theme related. I found a setting for background color of the image (in Elementor). This color was shown during the lazy-load. So now i know how to change that color. Thanks.

  3. Jiří Vaněk says

    Do you have experience with how Lazy Load affects user experience and other Google metrics? Not everyone recommends lazy loading precisely because it can appear unnatural on a website in the long run.

    • WPBeginner Support says

      It would depend on how it is implemented for how it affects the user experience and Google metrics.

      Admin

  4. Suzanne says

    Well, this plugin is awesome. My site speed score just went from an embarrassing 42 to a respectable 72!

  5. Piotr says

    Is that possible to creates a group of photos that will get lazy-loaded?

    Example: I have 30 photos and I want to lazy load first 10, when user keeps scrolling- I download another 10 and so on..

  6. Naveen says

    My site was having many issues and I have learned a lot here which has helped me to grow my blog.

    Many Thanks

  7. Franklin says

    Thanks for sharing this. I didn’t even think of getting a plugin for lazy images, and I probably will be getting this later. :)

  8. Alun Price says

    I’d love to implement a lazy loader on my website but I’ve heard that they can negatively impact on SEO – is this true????

  9. Dr.Amrita Basu says

    Thank you for this. Helped me make a much-needed change quickly .Have downloaded and adjusted the plugin settings

Leave a Reply to Franklin Cancel reply

Thanks for choosing to leave a comment. Please keep in mind that all comments are moderated according to our comment policy, and your email address will NOT be published. Please Do NOT use keywords in the name field. Let's have a personal and meaningful conversation.

WPBeginner Assistant
How can I help you?

By chatting, you consent to this chat being stored according to our privacy policy and your email will be added to receive weekly WordPress tutorials from WPBeginner.