How to Make Photos Load Faster on WordPress: 6 Key Tactics

Struggling with how to make photos load faster on your website?

Images help you create a more engaging website, so it’s great to use them. But if you use a lot of images, you’re at risk of slowing down your site if you don’t optimize them, which is why it’s good that you’re interested in learning how to make images load faster.

Thankfully, there are plenty of tactics that you can implement to speed up your images, with or without affecting their photo quality.

In this post, we’ll share a comprehensive guide on how to load faster the images that you use on your website.

We’ll start by sharing six key tactics to speed up image loading. Then, we’ll show you how to use two beginner-friendly WordPress plugins to implement these tactics on your WordPress site.

How to Make Photos Load Faster: Six Performance Strategies

In this first section, we’re going to talk about the tactics that you can implement to make your images load faster on your site. Then, in the next section, we’ll show you how to implement all of these tactics on WordPress.

You can think of this section as the “theory” and the next section as the “actionable how-to”.

If you’re wondering what makes images load faster, keep reading! Here are the six tactics you can use to speed up images on your site, ranked roughly in the order of their importance:

1. Compress photos.
2. Resize photos.
3. Convert photos to optimized formats like WebP.
4. Use a content delivery network (CDN) to speed up image download times (especially for visitors far away from your site’s hosting).
5. Lazy load images.
6. Enable browser caching to speed up subsequent visits.

The first three tactics deal with optimizing the image files themselves, while the latter three focus on optimizing how your website loads those image files.

Let’s go through how these tactics can speed up your images’ loading on WordPress.

1. Compress Images

Photo compression lets you shrink the file size of an image without changing its dimensions. Compression works by removing redundant/unnecessary information and applying various algorithms to reduce the file size.

There are two types of compression:

• Lossless – a small reduction in file size with no change in quality.
• Lossy – a much larger reduction in file size, but there might be some loss in image quality. There are different levels of lossy compression – some might not even be noticeable to the human eye, while more aggressive algorithms might have a noticeable impact.

You can learn more in our article about lossy vs lossless image compression.

For most websites, you’ll be fine with lossy compression. However, if you’re a photographer or in another industry where image quality is paramount, you might want to stick with lossless compression.

If you use lossy compression, you can achieve some pretty impressive savings. For example, we used Imagify to compress a simple JPG image. Imagify is a free image optimization tool that we’ll cover later in this guide.

After using lossy compression on the test image, we were able to shrink the size from 133.7 KB to 36.9 KB with very little change in quality – that’s a ~73% reduction in file size:

2. Resize Images

Above, we told you that photo compression lets you change the file size of an image without changing its dimensions. But in most cases, you do want to change the image dimensions, which is where photo resizing comes in.

All things equal, the larger an image’s dimensions, the larger its file size will be. And the larger the file size, the slower the images will load.

For a website, you should try to resize images to the exact size you’re using. For example, if your site’s content area is 800 px wide, you’ll want to resize images to 800 px (or maybe double that to 1,600 px to account for high-resolution monitors like Retina screens).

How big are the savings? Here’s a quick test example where we just resized the image without adding any compression:

If you combine compression with resizing, you can achieve some pretty incredible reductions in image size. For example, after compressing the resized image with Imagify, we shrank it even further to 101 KB.

So just by resizing and compressing the image, we dropped it from 380 KB to 101 KB with pretty much zero change in quality (assuming you’re displaying it on a website).

3. Convert Photos to WebP

WebP is a modern image format from Google that can offer smaller file sizes than JPEG or PNG without any loss in quality.

On average, WebP images are 25-34% smaller than comparable JPEG images and 26% smaller than comparable PNG images.

To benefit from these size savings, you can convert your images into WebP when you upload them to your WordPress site.

To learn more about this format, check out our complete guide to WebP images.

4. Use a Content Delivery Network (CDN)

A CDN is essentially just a global network of servers all around the world. If you configure your WordPress site to use a CDN, you can host all of your site’s photos (and other static files) on this network of servers.

Then, visitors to your site will be able to download photos from the network location that’s nearest to them instead of needing to download them directly from your site’s hosting server.

By reducing the physical distance that the image files need to travel, they’ll load faster for your visitors.

A fast CDN is especially useful if your website’s audience is spread across a wide geographic area, like multiple countries or continents. We suggest reading our in-depth article on what a CDN is and how it works to learn more.

However, if your website only targets people in a specific geographic location (like your local city), then you might not notice much improvement in image load time using a CDN.

5. Lazy Load Images

Lazy loading your WordPress site’s images can limit the impact that your photos have on your site’s overall load times.

Essentially, lazy loading lets you wait to load images that are outside a visitor’s visible viewport. Instead, your site will only load the images “just in time” as a visitor starts scrolling down.

This will lead to faster initial load times, even if you have a lot of images on the page.

6. Enable Browser Caching

Browser caching won’t make photos load faster the first time a person visits your site. But it will speed up image loading instantly for subsequent visits.

How? Well, browser caching lets you tell visitors’ browsers to store your site’s images on the visitors’ local computers (in the browser cache). 

Once the visitor downloads the image(s) on their first visit, they’ll be able to load those images from their local browser cache on subsequent visits, which will lead to faster load times.

How to Speed Up Image Loading With WordPress Plugins

Now, let’s get into how you can implement the six tactics to load images faster on your WordPress site.

You’ll only need two plugins to set everything up:

• Imagify – you’ll use this to optimize the image files themselves.
• WP Rocket – you’ll use this to optimize how your website serves those image files to visitors.

Imagify – Compress, Resize, and Convert to WebP

Imagify is an easy-to-use WordPress plugin that can handle the first three optimization tips on our list.

Once you configure it, it will automatically optimize all of the images that you upload to WordPress using the following tactics:

• Compress images using lossless, moderate lossy, or aggressive lossy algorithms.
• Resize images to certain max dimensions.
• Convert images to WebP and serve them to visitors.

You can also bulk resize and compress your site’s existing photos with a single click.

To get started, install and activate the free Imagify plugin from WordPress.org. Once you activate the plugin, it will prompt you to enter an API key, which lets you connect your WordPress site to the Imagify optimization service.

To get your API key, you can register for a free Imagify account. You’ll be able to optimize 20 MB of images per month for free forever (~200 images per month).

If you need to exceed those limits, the paid plan costs $4.99/month for 500 MB (~5,000 images) or $9.99/month for unlimited usage. You can use the paid plans on unlimited WordPress sites.

Once you have your API key, you can paste it in the box and click Connect Me:

Then, go to Settings → Imagify to configure your image optimization settings.

At the top, you can choose your desired compression level. There’s also a visual comparison to help you test different levels:

If you scroll down, you can have Imagify automatically convert images to WebP and display them to visitors. For WebP images, we recommend using the <picture> tags method:

Below that, you can tell Imagify to resize large images to a certain max dimension (based on width). Again, we recommend setting this to the width of your site’s content area (or maybe double that if you want to offer higher-resolution images for Retina screens):

And that’s it! Imagify will now automatically optimize all of the new images that you upload to WordPress.

If you have a lot of existing images on your site, you can have Imagify bulk optimize them by going to Media → Bulk Optimization:

WP Rocket – Browser Caching, Lazy Loading, and CDN 

WP Rocket is a full WordPress performance plugin that can speed up your entire site and implement the other photo optimization tactics that we discussed. This includes:

• Implementing browser caching.
• Lazy loading images.
• Connecting to a CDN.

Beyond that, it can also help with non-image performance improvements such as page caching, code optimization, and lots more.

To set it up, you’ll first want to purchase and install WP Rocket.

As soon as you activate it, it will automatically enable page caching and browser caching. To access the other settings, go to Settings → WP Rocket in your dashboard.

To enable lazy loading, you can go to the Media tab and check the box to lazy load images (and videos, if desired). You can also have WP Rocket add missing image dimensions, which is another useful optimization tip:

To set up a CDN, you can go to the CDN tab. The easiest way to get started is to use the RocketCDN service, which costs just $7.99 per month for unlimited bandwidth. Or, WP Rocket can also help you integrate with other services such as Bunny CDN, KeyCDN, or StackPath.

If you do use a CDN and you configured Imagify to serve WebP images using the <picture> tags method, you’ll need to go back to Imagify’s settings (Settings → Imagify) and also enter your CDN URL in the WebP settings box.

Make Your Images Load Faster Today

If you use a lot of photos on your website, it’s important to optimize them so that your site loads quickly.

In this post, we’ve covered a number of ways to make photos load faster. 

To start, you should optimize the image files themselves. With Imagify, you can compress, resize, and convert to WebP to ensure that your image file sizes are as small as possible.

Then, you can also use WP Rocket to optimize how you use and load images on your site with tactics like a CDN, browser caching, and lazy loading.

Do you still have any questions about how to make images load faster for your WordPress site? Let us know in the comments!