How to Optimize Your Images for WordPress

Filed Under:

WordPress Management

When we do site speed audits for our clients, non-optimized images are always among the top contributing factors behind why the site’s load times are so slow. In fact, the majority of your website’s bandwidth usage comes from the images on your site. If the majority of the data transferred to a webpage comes from images, you can see how profound of an impact you can have on your load time just by optimizing these images to a smaller size.

All customers who have a support subscription with us automatically get notified when we detect an image that is too large on their website, but what can be done to reduce that image size? That’s exactly what this article will teach you.

Importance of Image Optimization

One of the metrics that search engines use measure for search ranking is your website’s speed. If your site is slow, it will have a negative impact on your ranking. In other words, optimizing your images can improve your search ranking.

It’s also important to optimize your images because faster load times create a better user experience for your customers, which can have a negative impact on your website’s conversion rate. 2017 study found that every 100-millisecond delay in your site’s load time can drop your conversion rate by 7%!

How to Optimize Images for WordPress

Image optimization is nothing more than making your images the smallest size possible, without sacrificing quality. The goal is to make your site visitors only download what they need to get their site experience, and nothing more. There are three different ways to do this:

1. Image Compression

Compressing an image will decrease the file size of an image by removing extraneous details that the naked eye doesn’t notice. I’ve seen images go from 40mb to less than 1mb using this method, and you’d never know the difference.

2. Image Size Reduction

Another significant way to optimize an image is by reducing the size to match the use-case. It makes no sense to use an image that’s 3000px x 5000px when it will never appear larger than 300px x 500px in the browser. Instead, it would be best if the image was exactly 300px x 500px. This makes it so that your site visitors only download the data they need, and nothing more.

The beauty of WordPress is that it will automatically handle a lot of the image reduction for you, especially if your theme uses the different sizes on your site.

3. Image Format Changes

Different image formats serve different purposes. Use jpg images for photos, and png images for graphics, such as a logo. There are many more formats, and other reasons why you’d use each one, but one key reason to use the right format is the image size. For example, the lesser-known webP format works just as well as a png, but it can be x percent smaller than a png.

Optimize WordPress Images Without a Plugin

The most straightforward to optimize images without a plugin is to manually scale, and optimize the image before you upload it to your WordPress website. You can use just about any image manipulation to do this. Photoshop, or GIMP will work, as well as web-based tools like Canva. This is a tedious process, but it’s effective.

When you upload an image, WordPress automatically scales, crops, and saves several different versions of your image, and will automatically use the best size image for each use-case.

The default image sizes that come with WordPress are pretty good, but it if you have some unique image sizes on your site, you can get some improvements by creating custom image sizes using WordPress’s add_image_size function.

In your theme’s functions.php file, you can add this:

A snippet that will add a custom image size to your WordPress site.
add_action( ‘after_setup_theme’, function(){
    add_image_size( ‘category-thumb’, 300, 200, true ); // 300 pixels wide 200 pixels high. Set the third value to “true” to force-crop the image instead of just scaling it.
} );

And it would create a custom image size that is 300 pixels tall, by 200 pixels tall. Setting the third value as true will crop the image, forcing the image size to always be true.

But this alone will not be enough to get high scores on site speed tests. No matter what you do, you’ll probably need to use some plugins to truly optimize your images in a way that doesn’t take too much time.

One important thing to note – WordPress generates different image sizes when you upload the image, so if you add an image size to a site, the images that are on your site now will not use the new size you created. You can force images in your library to regenerate using the Regenerate Thumbnails – WordPress plugin | WordPress.org plugin.

Optimize WordPress Images With a Plugin

There are several image optimization plugins for WordPress. I’ve found that only a few are necessary for you to optimize your images. we use two types of plugins on our sites. One plugin that creates WebP images, and another that compresses images.

reSmush.it

reSmushit is a bulk-image compression and optimization plugin, and we think it’s the best image optimizer in the WordPress ecosystem . This tool will automatically “smush”, or compress your images as you upload them. This will decrease the size of your image It also has a tool that will allow you to batch-compress the images already in your library.
reSmush.it Image Optimizer – WordPress plugin | WordPress.org

There are a ton of other compression plugins out there. We chose reSmush it because it’s free, it compresses images better than its competitors, and it’s compatible with our host. We base this on our findings from This WPBeginner article.

WebP Converter Plugin – WebP Converter

One thing that had a profound impact on our site speed scores was the WebP Converter for Media WordPress plugin. This plugin will automatically create WebP versions of your images, and when possible will use the WebP format instead. This will dramatically decrease the size of your images in most cases. It’s simple to set up, and it’s effective. After using this on our own site, our image sizes decreased by a whopping 66%! What’s crazy is that this difference is, considering these images were already compressed using reSmushit.

We have to ask our host to make a change to their Nginx configuration on each site in-order to support WebP. be sure to ask your host if they’re running on Nginx, and if they are ask them to enable support for WebP images!

Image optimization takes some effort to set up, but it is one of the simplest things you can do to make your site faster. With the right tools, you’ll experience better conversion rates, higher ranks on search engines, and a better user experience for your customers.

A portrait of this article's author.

About Alex Standiford

Alex Standiford is the founder of DesignFrame Solutions. Alex has been tinkering with computers and technology his entire life, and started his career as a freelance WordPress developer in 2015. When Alex is not writing code, he can usually be found outdoors, playing disc golf, hiking, or tinkering with a campfire. He's a bit of a foodie, and is often found cooking over the fire with one of his many cast iron skillets.

Join others growing their business with WordPress

Get a steady stream of tips, how-tos, and advice from leading WordPress professionals.
  • This field is for validation purposes and should be left unchanged.