Image Optimization Tools: Making WordPress Pages Load Faster

With the recent launch of Accelerated Mobile Pages, which reminded everyone of Facebook Instant Pages and Apple News, it’s clear they want us slimming down our web pages. They want Speedy Gonzales, but we’re offering a fat, lazy mouse with unnecessarily giant ears.

And by “they” I mean: publishers, platforms, and your everyday web user. All of us have the need for speed don’t we?

Most people are using mobile devices these days, and besides, pages simply take too long to load regardless of browsing device (in many cases). It’s our images that are, in general, unnecessarily large. In file size, that is.

Really, there are a lot of factors that can affect the time it takes to load a web page, but my focus here today is supporting WordPress users, and talking about how we can keep our images lean (and optionally mean).

May I digress for a couple seconds though?

I personally blame the majority of web page slowness on the fact that most things are being pulled from databases and that multiple queries are run within one page load. What happened to the good ol’ days of organized folder structure, static text files, and include files with clean hand-coded HTML? When I learned of the BLOB field type for databases a decade and a half ago, I shook my head and screamed “why, why, why!” But hey, I get it, databases simplify things and reduce redundancy. Moving on.

Overall WordPress Web Site Optimization

For my WordPress sites, I used to take several days just to implement all (or most) of the best practices for optimizing web pages for speed. These days though I use a managed WordPress host that handles many tasks on my behalf.

In terms of speed, they have me covered for:

• An optimized, tweaked, web server that understands the nuances of WordPress.
• A proprietary caching system that knows when to serve dynamic pages, and when it’s better to take a snapshot of a page on first load, and serve that instead of hitting the database. See! 😉
• A one (maybe two) click CDN setup. CDN stands for Content Delivery Network, and essentially serves images and other web page assets from computers around the globe. The computer that does the serving depends on the location of the current web site visitor. Basically, the closest one is chosen, to help keep things serving faster.

But then what’s left to do?

I feel like most WordPress users are already hip to the idea of using a responsive theme. Generally, a responsive theme developer takes into consideration the differences between mobile devices, and non-mobile devices. Whether or not hamburger menus offer a good user experience is debatable, but for the most part, responsive themes serve their intended purpose. They take into account the size and orientation of the current viewer’s screen, and display the web site in response to that. It may be that they leave out certain elements such as a sidebar, or extra images. And they may shrink (or grow) the viewing area in a clean way, allowing the text to wrap and flow.

All sites have different purposes of course, but for me, these days, for the majority of my sites, I am really taking a hard look at the theme. Many themes, while they look pretty, which helps when “selling” (or flipping) a web site or for looking snazzy in a portfolio, are much too cluttered. This is generally bad for conversions (getting people to perform the desired action on your web site), and often also makes the page load too slowly. As we know, slow pages means Google doesn’t want to float us to the top of the index, and most people won’t wait around for the pages to load when they do find us. Need for speed.

I am taking cues from the Accelerated Mobile Pages (AMP for short) project where there is just a subset of HTML being used to create faster page loads, and offer a better user experience. Also, while I don’t use Microsoft Edge in general, I just discovered its “Reading View” mode today, and I kinda like it. Maybe, just maybe, our main default web sites should be just as streamlined? I am thinking… AMP-only web sites, and pages created so clean that Edge’s Reading View leaves nothing out. Clean, clutter-free, fast-loading, great user experience and a clear singular call to action. Feel me?

Alright, regardless of if we are following advice from AMP where we are:

• explicitly declaring the height and width of an image, so that the page knows how much space to reserve to avoid jank
• and hopefully loading an image having the precise dimensions that are declared, to avoid loading a larger-than-needed image…

… we still have some work to do.

As previously mentioned, images are often taking up more space on the hard drive than they need to (because they can potentially look just as good and have a smaller file size), which inherently affects the time it takes to download and load the image into a web browser for our readers to see.

I will share with you my set-it-and-forget-it approach for resizing images on-the-fly with WordPress.

First though, what is WordPress doing on our behalf when it comes to images, in order to assist us in creating faster loading web pages?

Images Responding to Screen Size and Orientation

What used to not be achievable without custom code, WordPress has now made responsive images part of the core. This is exciting news for anyone that was frustrated messing around with any WordPress image filters.

As you may know, WordPress, and the theme being used by your WordPress site, creates a variety of “thumbnail” versions of the image that you upload to the Media Library. This is a very very handy thing. In the past, the sole purpose for this, was so that the theme could show different sized images (in terms of dimensions, or width and height) for different scenarios. For example, there may be a small rectangle image that floats to the right of your post when viewing a list of posts in a category or author archive. Then, on the single post page, it might show a larger rectangle, which may or may not link to the full sized image.

But now there is an additional purpose. Having multiple versions of the image is handy for when the web page is being viewed on different sized screens. Now, when the HTML code for an image is sent to the web browser, being that WordPress has made it responsive, it provides details about the different versions (or sizes) of the image being displayed. That way, the proper image, size-wise (in terms of both dimensions and bytes) can intelligently be used, rather than loading a giant image and just shrinking it down with code (or vice versa). Cool!

As an aside: This does mean though, that those themes that also create versions of your uploaded images to be specifically used for when sharing a post to Facebook, Google+, Twitter, Pinterest, etc., by matching the dimensions best suited for those social platforms, may accidentally be providing a dis-service. We may not necessarily want those versions being used in the list of responsive images. Those social images may be better left as Custom Fields within a post, with just the image URL being added within the HTML of the page (in the structured data). They serve a different purpose after all, and may benefit from looking differently than the Featured Image of a post. For example, we may want to overlay words on top of these social images to attract more attention.

Either way…

Now that we understand that multiple images are being created for each image upload, what is the next step?

Let’s look at making sure our images, and all the created thumbnail versions, are smaller in file size, while still looking just as crisp. Can we pull that off?

Resizing Images On-The-Fly in WordPress

Even if we use proper sized images, dimension-wise, that offer smaller overall file sizes, they still may take longer to load than needed. WordPress sometimes actually shrinks the file size during upload using a decent enough algorithm that it doesn’t really need a user interface for users to tweak the settings. And, they are improving those image tweaks on occasion. But there is still room for improvement. Lots of room. But, having the ability to fine tune the settings for image optimization, may be a necessary step to squeeze out the extra benefits.

I am going to share a few of the top image optimization plugins for WordPress below. Within that section I will describe some of the main features of each plugin.

In addition to showcasing a few image compression tools, in a clean WordPress site, I will:

1. find a reasonable sized CC0 image
2. make note of its original size on disk
3. upload the image to WordPress
4. make note of the new size after WordPress has its way with it
5. install an image optimization plugin
6. re-upload the same image
7. and make note of the image size after the plugin optimizes it (granted, WordPress will have worked with it before handing it off to the plugin, unless the plugin is disabling WordPress’s tweaks behind the scenes)

Then I will do the same for all of the other plugins that I test.

I will leave the default settings for each plugin during testing.

Then I will share the results below.

For me, when looking for a tool to serve my image optimization needs a few months back, I wasn’t really analyzing the pixels of each image that it output to see which tools produced the best results. I was looking for a low-cost tool that was simple to use on multiple web sites, and that created images that still looked really really close to the original, but still reduced the file size a reasonable amount.

Action Steps: Finally Setting Up WordPress To Optimize Your Images

Right now, I will walk you through how to set up the one I picked (ShortPixel), and then we’ll take a closer look at a couple more to give you an idea of what’s available.

For this to work, you will need to download and install the plugin from the WordPress plugin repository. Image processing will then begin automatically using default settings. You get 100 images free each month. The processing happens on the ShortPixel server, invisibly in the background, to avoid having to install extra utilities and make configurations on your server, which in many shared hosting environments, cannot be done anyway. You will need to get a free ShortPixel API key so that your web site can communicate with the ShortPixel server.

Here we go:

1. Get your API key sent to your email address. Might as well get that ball rolling first.
2. Next, download, upload, install, and activate the plugin in the traditional way. Or, search for “shortpixel” from your Add Plugins screen (Plugins >> Add New) to get it installed and activated.
3. Now, go to the ShortPixel Settings screen (Settings >> ShorPixel)
4. Paste in the API Key that came in your email, and click the Validate button.
5. Now your configuration settings will be displayed. Currently, the defaults set by the plugin are: lossy compression type (rather than lossless), thumbnail optimization is turned on (good idea), original images are saved just in case, images are adjusted for mobile devices too (this involves a conversion related to colors), and meta data (or EXIF data more appropriately) is removed.

You can play with the settings if you don’t like the desired results. I realize I don’t get as many savings, but I generally choose the “lossless” option. Also, eventually I turn off backups because the plugin works and I trust the output.

There is another option that I don’t recall seeing before writing out these steps. It lets you set the maximum image dimensions for each uploaded file, just in case you or your users are uploading giant files from cameras or from image repositories like Pexels or Flickr. It gives you an indication, based on currently registered thumbnails (by your theme or other plugins) what dimensions you should not go below (i.e. it shows you your largest thumbnail size).

Now, when you are optimizing thumbnails, as you should be, then the free credits get zapped quick (unless there is less than 5%, maybe 6%, savings – it doesn’t take credits when that’s the case), but they are replenished monthly. You can upgrade to get extra credits. If you run multiple web sites, you can use the same API Key to take from the same pool of credits. It’s well within the terms to utilize the same API Key across all your sites. Just don’t share it publicly of course. The “Stats” section on your web site will have stats specific to the site, but the “Plan” section will show some basic stats across all sites where the same API Key is in use.

ShortPixel is handy, easy to use, affordable (the credits last a long long time for me), and I can quickly set it and forget it. The only area you need to tweak if you don’t like the results for the types of images that you tend to upload on your site is the “lossy” and “lossless” section. Unless you are exposing the data on your web site for whatever reason, I would definitely let it strip out the EXIF data. I might take advantage of the “Resize larger images” feature, where you can change the dimensions of the “Full Size” version of the image on-the-fly, for extra savings.

Oh, if you are uploading ShortPixel to a web site that already has a bunch of images uploaded, once you have the right settings, you can use the Bulk Optimize feature. It’s fun to watch it in action. You can get that from Media >> Bulk ShortPixel. It keeps track of the images that already have been optimized so as not to do them again.

I’m not an image techy so I have no feedback for ShortPixel on any new image-tweaking features that they should include. I like the simplified, well-explained feature set provided. However, if I had it my way, from my ShortPixel account, I would be able to see a list of the web sites that currently use my API Key. I would like to be able to “revoke access” (or better yet, “switch to free”) for any of the listed sites. In addition, once the API Key is added within my WordPress web site, I would like it to be hidden. I’m just speaking from a “developer” stance where I might offer image optimization service to clients.

At any rate, ShortPixel isn’t the only tool in town. Let’s have a peek at some of the other well-known, well-established tools. Although a great tool, I am going to skip WP Smush-it here. In the past, it felt like that was the only optimization tool around when Yahoo! owned it. Then it felt like overnight, we couldn’t access it in the same way as before, and to get the same feature set suddenly cost a bunch of money. I realize a lot has changed since then, but regardless, today I am going to showcase: ShortPixel, Kraken, and TinyPNG. Although I will be skipping them today, three other seemingly awesome tools for WP include: Optimus, Imagify and EWWW.

Top Image Optimization Plugins for WordPress

All of the following plugins are similar in that they:

• process images “in the cloud”
• can optimize images as they are being uploaded, as well as previously uploaded images
• can resize images (in terms of width and height) on-the-fly too
• will let you use the same paid account with multiple sites

ShortPixel Image Optimizer

I described ShortPixel in great detail above. From reading the description page in the WordPress plugin repository, I learn that their tool will optimize PDF files as well. They offer a free plan as well as paid plans. All plans have the same feature set, it’s just the number of images that can be processed that changes.

As of this writing, ShortPixel boasts 4.6 out of 5 stars, and has more than 20,000 active installs.

Plugin: https://wordpress.org/plugins/shortpixel-image-optimiser/

Kraken Image Optimizer

You can try the Kraken WordPress plugin for free. However, in order to use it beyond the 50 MB testing quota, you will be required to upgrade to a paid plan starting at $5 per month. Visit their web site to see the full feature set.

With this plugin, I like that you get the choice on which EXIF data you would like to retain, if any. By default, none are selected.

Right now, Kraken has more than 10,000 active installs and, like ShortPixel, has an overall rating of 4.6 out of 5 stars.

Plugin: https://wordpress.org/plugins/kraken-image-optimizer/

TinyPNG: Compress JPEG & PNG images

Not a feature I realized that I would appreciate until reading about it, but TinyPNG offers you the ability to choose which thumbnails you want to optimize. Since your theme, and possibly other plugins, register several thumbnails with WordPress, it could be taking a lot of “credits” (or however you are charged by a given image optimization plugin), unnecessarily, if you don’t need all the thumbnails. But, how do you decide which ones to optimize? I don’t know, but I like having the option of choosing which thumbnails that I want to auto-process either way.

TinyPNG is a utility that some other tools use within their proprietary approach to image optimization. That’s cool.

This tool has been around for quite awhile, and has more than 40,000 active installs of the WordPress plugin.

Plugin: https://wordpress.org/plugins/tiny-compress-images/

The Results

I uploaded an image with the dimensions of 1920 x 1280, but am showing the 320 x 213 optimized thumbnails below. For the size, I am making reference to the full sized optimized image. Keep in mind too, that, how the image looks is more important than the size reduction (probably). Also, I only tested one image of one type, so it’s not at all an exhaustive test. Feature set, price, and ease of use are all important as well. With that said, I like them all for one reason or another. With a few feature tweaks though, and even better pricing, ShortPixel will reign supreme.

Original Image (498 KB):

WP Default Optimized (498 KB, no change in size):

ShortPixel Optimized (174 KB):

Kraken Optimized (381 KB):

TinyPNG Optimized (180 KB):

In Conclusion

Just like you can probably hand-optimize your web site slightly more optimally than when auto-optimizing, I feel the same is probably true with image optimization. However, getting 90% or more of the way there in an automated way… I’m a fan. Set it and forget it, I say. #SpeedUpTheWeb