Optimize images to improve site speed

It’s happened to everyone. You run a Google PageSpeed analysis on your blog and it tells you to “Optimize images”? What does that mean, and how do you do it? Should you even bother?

Simply put, image optimization removes unnecessary data from your images so they take up less disk space and use less bandwidth. Through the magic of technology, they do this without affecting how they look or fit in your blog.

Keeping your images optimized is one of the easiest ways to dramatically decrease page load times and improve your PageSpeed score. Unfortunately, it can be tedious to optimize your images manually, and it’s easy to forget to do it. If you have a blog with several months (or years!) of unoptimized images, it may seem like an insurmountable task.

Fortunately, as with most WordPress problems, there’s a plugin for that! And of course, there are lots of plugins to choose from.

The two plugins we recommend for Agathon clients are Imagify and Short Pixel. We’ve seen both in use on real client sites, and we’re sharing our top recommendation down below!

Imagify

Imagify is the image optimizer from WP Media, the developers behind WP Rocket, one of our favorite caching plugins.

This plugin offers free compression for up to 25MB of images, or a paid version starting at $4.99 for 1GB of data per month (which should be plenty for most bloggers). They also offer a one-time payment option for bulk processing your media library if you don’t think you’ll need a paid plan moving forward.

Once activated, Imagify handles image optimization automatically, with three levels of compression to choose from:

• Normal: Lossless compression that does not affect the image quality.
• Aggressive: Lossy compression with a small loss of quality that isn’t noticeable most of the time.
• Ultra: A strong, lossy compression that will impact quality.

Original images are backed up so they can be restored at any time, although these backups will use up some of your server space. If diskspace is a concern, we recommend moving these backups to their own, separate storage so that they doesn’t impact the disk space on your server. For Agathon clients, this additional storage is $0.20/GB/month and usually adds just $2-3/month to your total cost.

Short Pixel

We are partial to robot mascots ourselves, but that’s not the only reason we like ShortPixel! Similar to Imagify, the free version of this plugin allows you to compress up to 100 images per month, but they also offer a paid monthly plan starting at $4.99 or the option to purchase extra credits as needed.

They also offer 3 levels of compression:

• Lossless: Reduces the file size of images slightly without touching the image data or quality.
• Glossy: An even smaller file size while protecting image quality.
• Lossy: The highest level of compression, balancing file size & image quality

ShortPixel can also optimize PDFs, which is a great feature if you’re offering printables or other graphic-heavy PDF files and you’re concerned about how quickly they load for your readers.

Like Imagify, ShortPixel will keep a backup of all of your original images in case you’re not happy with the compression and want to restore those.

So, which do I use?

Both Imagify and ShortPixel do an excellent job of image optimization. The optimized file sizes created by each plugin are about the same. Both plugins are capable of a “set it and forget it” approach: install the plugin and it’ll seamlessly do its job in the background.

They also both offer the option to create WebP images, which is Google’s new image format. These image files are smaller than JPGs and PNGs. But more importantly, Google wants sites to use WebP images and often provides a dramatic PageSpeed score boost for those that do. Read more about WebP images and what they mean for your site.

Both of these plugins are great choices, and either will help speed up your page load times. When considering the cost for each of them, Imagify may be less expensive on a cost-per-image basis. However, we think you’ll be pleasantly surprised at how inexpensive it is no matter which plugin you end up choosing!

Optimizing your image dimensions

Before we finish up, there’s one more thing to keep in mind. Even if you’ve optimized the file size of your images, you can still run into issues if your images use incorrect dimensions.

Here’s what we mean by that:

When you upload an image, WordPress automatically generates multiple versions, or thumbnails, at different dimensions. WordPress includes a few of these thumbnail sizes by default, but any theme or plugin can also define their own thumbnail sizes. This allows themes to use your images in a predictable way, since those images will be available at the thumbnail sizes the theme requests.

There are times, however, when WordPress can request an image whose dimensions don’t match any of the available thumbnail sizes. (This happens most commonly when you insert an image in the post editor and then drag to adjust it to a different size.)

In these cases, the web server has to deliver the full-size image and instruct the browser to resize it according to the desired dimensions. These files are often larger, which means longer load times for your users and, subsequently, a massive penalty in your GPSI score.

How to fix it

There are two ways to address these image dimensions mismatches:

1. Be consistent. If you have a thumbnail defined for 450×450, make sure your design doesn’t use 425×425. Or if you must use 425×425, define it as one of your custom thumbnail sizes!
2. If you need to resize an image in your post, after you do so, click the image and click the “Edit” pencil. Note the image’s Custom Size, and click Edit Original. In the top right, enter the dimensions from the Custom Size and click Scale.

Be careful using strategy #2. If the image you’re working with is used in other posts, the image will get resized in all of those other posts too. So if you use an image at 600×600 everywhere, but resize it to 400×400 using #2 above, it will be resized to 400×400 everywhere else as well!

If it’s an image specific to one post, you should be fine. Nonetheless, you should use this approach sparingly; it’s always better to standardize your images sizes through thumbnails and then use those consistently!

Tell us your score!

We’d love to hear how your site speed improves after using an image optimization plugin. Drop a comment here with some before/after PageSpeed numbers, or tweet us @agathongroup!

Peter Green

Peter is responsible for designing and building the infrastructure that holds all of our hosting, providing client support across all of our products, and participating in partner meetings as well as general management tasks.