So you want your images to load faster?
Well, I won't dilly dally. Let's dive right into the good stuff!
There are three ways to make images load faster in WordPress:
In this post, I'll explain how each of these techniques works and why they'll make your site load faster. I'll also show you how to implement each tactic with both manual solutions and plugin recommendations.
This first technique is extremely simple but often overlooked by WordPress newbies.
How to Optimize Images in WordPress
Resize your images
The absolute simplest way to make your images load faster is to resize them. Let me explain.
What is resizing?
When I say "resize" I mean to change the dimensions of an image, and in this case, you want to reduce the dimensions of overly large images.
As an example, bloggers sometimes take photographs on their phones or digital camera and upload them to their blogs. The unedited copies of the photos could be as large as 5,000px wide. Now think about this...
The width of the post section on your site is probably no wider than 800px. The text you're reading right now only spans about 700px across the page, so imagine adding an image that is 5,000px wide here. It would be way larger than it needs to be and while it would be downscaled to fit the page, the image file loaded is still massive and extremely wasteful. And that's because...
Images that have larger dimensions also have larger file sizes.
When it comes to performance and making your images load faster, reducing the dimensions of your image is a great way to drastically decrease the file size, and this makes the image load faster.
Let's go back to my example and assume the image is 5,000px wide and tall. If you reduced it from 5,000px down to just 700px, the image would actually use 99% fewer pixels. In other words, the file size would decrease by about 99%. If the image was 5mb, it would end up just 50kb and it would load 99% faster on your site.
If you haven't mean carefully resizing your images, there's almost certainly some gains to be made.
There are a few ways you can resize your images to fit the site perfectly.
Manually resize your images
Before uploading a new image to your site, resize it manually using the built-in image editing tools on your computer.
If you have an extremely large image like in my example, this will immediately make a big difference. After the image has been resized, then you can upload it to your Media Library.
Even if you're going to use the image in a lightbox or slider, there's normally no reason for it to be any wider than 2,000px. If the image is going to be in a post or page content area, you can probably do well with the image being 800px wide.
This method of resizing images works fine, but it doesn't help with images already uploaded to your site. An easy technique for existing images is to simply choose a different size.
Use smaller sizes
When you upload an image to your Media Library, WordPress creates up to 3 additional versions: Thumbnail, Medium, and Large.
If you visit your Media settings page, you'll see that you can choose those sizes here:
While you can modify the settings, the default Large size is 1024px which is big enough to use for posts without being too wasteful. You can use this size for all images you include in your posts.
To switch the size of an image you've added to a post, click on it in the editor, and you'll see the Image Size dropdown in the right sidebar.
Select the "Large" size and update the post. If you have any oversized images, this technique will let you quickly serve a more appropriate size that will load faster without needing to reupload and replace the original.
That said, this can be awfully tedious if you have dozens of posts with dozens of images. There is an even faster and more effective method available.
Automated resizing with a plugin
Instead of resizing the images yourself, you can let a plugin do it automatically for you. When it comes to automated image resizing, nothing beats the Optimole plugin.
It doesn't work the way you'd expect.
Instead of editing the images in your Media Library, Optimole keeps its own copies of your images and serves them from a high-performance CDN. This way, your originals are never modified in any way.
Furthermore, you don't have to give Optimole a single size to use for your images. Rather, it gets the size of the visitor's screen and generates an optimally sized version of each image on the fly. That means that someone on a mobile device might load a 400px version of an image while another visitor on a laptop gets a 700px version of that same image.
This method of resizing is way easier to implement and more effective for mobile devices which is especially important because mobile visitors often tend to be on slower connections.
If you want to learn how to use Optimole, you can follow my full walkthrough video:
I recommended resizing first because whether you do it manually or automate it with a plugin, it's simple and can offer huge gains.
If your images are already appropriately sized for your site, you can still improve your site's performance a lot more with compression.
Compress your images
Compression is a way to reduce the file size of an image without changing its dimensions.
There are two types of image compression available.
The first type of image compression is called "lossless" compression.
Lossless compression
With a lossless optimization, the image itself is actually not edited. Rather, this technique removes all of the metadata stored in the image file. For example, images often store the name of the device used to take the image, the date the photo was taken, and sometimes even the GPS coordinates of the shot.
Since this data is usually pretty limited, lossless optimization might only reduce the size of your image by 1-5%, but there's really no reason not to use it because there's no impact on the image quality.
The real gains come from lossy optimization.
Lossy compression
As you might expect, lossy compression optimizes the image itself and results in quality degradation. But here's the thing...
Compression algorithms are so good these days that you can often reduce the file size of the image by 50-70% without any discernible difference. Unless you are a professional photographer and need your images to be perfectly crisp on 4k monitors, you will not even notice the loss of quality.
How to compress your images
You can manually compress your images with a tool like TinyPNG before you upload them, or use a plugin to automate things.
ShortPixel is a great plugin for optimizing the images on your site. It can optimize them right away when you upload them and bulk optimize all of the images already in your Media Library.
I recommended Optimole for image resizing and it compresses images very effectively too. Once again, it doesn't optimize the originals stored in your Media Library, but rather compresses the copies that it serves to your visitors.
You can find a few more image optimization plugins here.
With your images resized and compressed, your site is going to load a lot faster, but there's one last optimization for images you can make.
Implement lazy loading
Lazy loading is a really smart way to further optimize your images.
Let's say you have a blog post with 12 images in it. When someone visits your site, not all of those images are going to be visible right away on their screen. They'll need to scroll down further for most of them to show up. So why load all 12 right away?
With lazy loading, only the images that appear on screen are loaded. Instead of 12 images being loaded, maybe only 2-3 are loaded instead. Then as the visitor scrolls down the page, the remaining images are loaded as they come into screen. This means that the initial load is much faster, and since most visitors won't scroll all the way down the page, a lot of the images are never loaded which saves you valuable server resources.
This video has visualization that explains it better if you want a clearer picture of how lazy loading works:
Now that you're sold on the concept, here's how you can implement lazy loading on your site.
How to use lazy loading
Once again, this performance optimization technique is easily added to WordPress with a plugin.
If you're looking for a free option then try out Optimole or a3 Lazy Load.
With Optimole, lazy loading is turned on automatically, and the a3 plugin is easy to configure.
Additionally, if you don't mind paying then check out . It has high-performance caching and a variety of other speed tools.
To turn on lazy loading with WP Rocket, all you have to do is flip this switch:
It couldn't be easier!
Enjoy your faster loading images
To summarize what you've just learned...
Oversized images uploaded to your site are extremely slow. Just one of these images can bring your site to a screeching halt.
The most important thing you can do to speed up your images is to resize overly large images so they are an appropriate size for your site. You can do this manually or automate it with Optimole.
Next, image compression algorithms have come a long way and these days, you can reduce the file size of an image by 50-70% without affecting the quality in a noticeable way. This is no brainer. Use ShortPixel or Optimole to compress every image on your site.
Lastly, lazy loading is a great way to selectively load images. You can use Optimole, a3 Lazy Load, or WP Rocket to instantly implement lazy loading on your site.
If you haven't been using any of these techniques, your site is going to load dramatically faster once implemented. It will blow you away.
Do you have any questions about the concepts and techniques in this post? Have another tip to share? Post in the comments section below!
