You spend a ton of time creating quality content for your WordPress site. You need to write the text, add your images, insert the links, and then perform all those niggling formatting details. Then you’re ready to publish, right? Wrong! Sorry, I’m going to add one more thing to your plate – you need to optimize WordPress images. And if you’re not optimizing your images before you publish them, you need to start today.
Optimizing your images takes two forms:
- Dimensions (in pixels)
- File size
In this post, I’ll tell you why you need to optimize your WordPress images. Then, I’ll show you how you can automatically or manually optimize both dimensions and file size.
Why Should You Optimize WordPress Images?
If you’ve been blissfully uploading images to WordPress without a care in the world, let me apologize in advance for bursting your bubble:
You need to optimize the images you use with WordPress.
Why? It all comes down to page speed. See, your visitors want your WordPress site to load fast. 30% of users want websites to load in under one second (at least for eCommerce) and data shows that visitors are less likely to buy from or subscribe to websites with slow load times.
So what do your images have to do with page speed? Well, they comprise the majority of the size of your web page. According to Akamai, the average web page size is ~2.1MB. And of that 2.1MB, 1.3MB, or about 65%, is just images.
So almost two-thirds of your website size comes from images! If you optimize those images to shrink that percentage down, you can massively decrease the size of your pages. And that means a huge increase in page load times.
And as an added benefit – anyone with bandwidth restrictions (like smartphone users…or Canadians!) will appreciate that your website uses minimal bandwidth.
How Should You Optimize WordPress Image Dimensions?
As I mentioned, there are two main components to the size of your images:
- Image dimensions
- File size (that is, compression)
Let’s start by dealing with the actual dimensions of your images.
Why You Always Need to Resize Your Images Before Using Them
Your WordPress site only has so much screen real estate with which to display images. For most themes with a sidebar, that’s typically around 600-700 pixels (px). So if you’re uploading images with dimensions like 1200 x 1000 px, all you’re doing is hurting your site.
Why? Because your visitors’ browsers are going to downsize that 1200 x 1000 px image to 600 px anyway. But because you uploaded it as 1200 x 1000 instead of 600 x 500 px, its file size is going to be much larger.
Let’s look at a quick example. I’ll upload an otherwise unoptimized image to WordPress and use the WordPress image editor to resize it. I’ll give you the starting size, as well as the size after I shrink it a few times:
- Starting dimensions: 1280 × 853 px. File Size: 75 KB
- Resize #1: 1000 × 666 px. File Size: 66 KB
- #2: 800 × 533 px. File Size: 46 KB
- #3: 600 x 400 px. File Size: 30 KB
So if your theme only displays images up to 600 px anyway, you just shrank your image’s file size by 60% without losing any quality or compressing your image!
That’s crazy, right? So unless you need those extra pixels, always resize your images’ dimensions.
You’ll even boost performance a little further by removing the need for your visitors’ browsers to resize the image.
What Image Dimensions Should You Use on WordPress?
Now the million dollar question – what image dimensions should you actually use for WordPress? For posts and pages, I like to choose the maximum size allowed by my theme and add 100 px.
Technically, I’m losing a bit of performance by adding 100 unnecessary pixels. But, it’s a good hedge in case you ever switch themes in the future. By giving a little buffer, if you move to a wider theme down the road, all of your old images will still look great.
So, that’s my recommendation – the maximum width allowed by your theme with 100 pixels tacked on top.
Next question – how can you resize WordPress images?
Resize Image Dimensions With a Plugin – Imsanity
If you want to stick to WordPress, the free Imsanity plugin can help you automatically resize all of the images that you upload to your WordPress Media Library. You can:
- Set max dimensions for height and width
- Bulk resize existing images
- Automatically resize all newly uploaded images
To use the plugin, you just need to install and activate it. Then head to Settings → Imsanity and configure the maximum dimensions you want to use for a few different types of images:
You can also choose to automatically convert .PNG images to .JPG, but I recommend leaving this feature disabled.
Use a Third Party Tool to Bulk Resize Images Before Uploading – BIRME
If you don’t want to use a plugin (or don’t have an admin account at the WordPress site you’re creating content for), you can use a standalone tool called BIRME, short for Batch Image Resizing Made Easy.
This is my personal tool of choice when I write for clients. All you need to do is drag your images into the BIRME interface. Then, you can choose your resize options. If you want to set a maximum width and scale the images without any cropping, make sure you choose Auto Height. Otherwise, BIRME will automatically crop the images (which can be helpful sometimes!):
When you’re finished, just click the Save ZIP button to download your resized images.
How Should You Optimize WordPress File Sizes?
I already showed you how shrinking your images’ dimensions can reduce file size. But that’s not the only way to optimize your images. You can also compress images to eek out some additional size improvements.
What is Image Compression?
Image compression shrinks the file size of your image by removing as much unnecessary data as possible. It comes in two forms:
- Lossless – your image doesn’t lose any quality. But the file size savings often aren’t huge.
- Lossy – your image will lose some quality. But the file size savings can be significant.
If you’re showcasing images where quality is paramount, you might want to stick with lossless compression. But if your images aren’t very quality-conscious (for example, screenshots), then you can likely get away with lossy compression.
I typically use lossy compression for images in tutorials (like this one) and lossless compression for other images (like travel photos).
Best WordPress Image Compression Plugins
There are a number of image optimization plugins that can automatically compress all of the images you upload to WordPress. They’ll also let you bulk compress your old images.
Here are two of my favorites:
Smush Image Compression and Optimization
Smush Image Compression and Optimization lets you losslessly compress all of your WordPress images. It works with JPEG, GIF, and PNG files. And in the newest version, you can even automatically resize your images, which eliminates the need for a plugin like Imsanity.
The only downside is that the free version only supports images up to 1 MB in size. You can also only bulk compress 50 images at a time with the free version.
Still, for casual WordPress sites, the free version should be fine.
To use it, you can install and activate it directly from your WordPress dashboard. Then head to Media → WP Smush to find the plugin’s dashboard:
The plugin will automatically compress newly uploaded images. If you want to compress your old images, you just need to hit the Bulk Smush Now button.
EWWW Image Optimizer
EWWW Image Optimizer is another free option. Whereas Smush works by sending your images to Smush’s server to compress, EWWW Image Optimizer does everything on your own server.
It lets you compress your images losslessly and lossily. And you can also bulk optimize all of your old images for free. Just remember that because EWWW Image Optimizer runs on your own server, bulk optimization might take some time.
To use EWWW Image Optimizer, you can install and activate it from your WordPress dashboard. Then head on over to Settings → EWWW Image Optimizer:
Among other settings, you can configure which type of compression you want to use.
To bulk compress your old images, you just need to go to Media → Bulk Optimize.
Best Third-Party Tools to Compress Images
Just like with resizing images, you can also use a third-party image compression tool if you don’t want to install another plugin. Here’s my favorite tool:
Compressor.io lets you upload JPEG, PNG, GIF, or SVG files and compress them using either lossless and lossy optimization techniques. It’s easy to use – just choose your optimization technique and drag your files into the interface:
Compressor.io will then tell you how much it was able to shrink your file and let you download it:
The only downside is that Compressor.io only lets you compress a single image at a time. If you need to bulk compress images, I recommend Kraken.io.
Kraken.io lets you lossily bulk compress images. If you upgrade to the premium version, you’ll also get access to lossless compression and automatic image resizing.
To use it, just drag your images onto the interface and then download the .zip file:
Wrapping Things Up
Optimizing the size of your WordPress images will pay dividends when it comes to your page load times. And with the right tools, it takes somewhere between zero and minimal effort to resize and compress your images.
Whether you do it manually or with a plugin, you should start resizing and compressing every single image you use on WordPress. Starting today!