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 website 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.
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 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 website 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 for 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 website 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 website 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.
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.
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.
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.