Have you ever visited a website, and just felt sickened by the rate at which the images were trickling in? Oh wait, that was your website!

Don’t worry, I know the feeling. That was me at my day job just a few years ago.

One of the biggest challenges to making a WordPress website fast and enjoyable for your visitors to use is the images. But it doesn’t need to be that way! Image optimization can do wonders for your website, for search engine optimization (SEO) and make your visitors happier and more likely to return.

The two biggest gains in image optimization are compression and resizing:

Compression is just re-arranging the bits to be packed in more tightly. The various image formats all have different tricks for that. Suffice it to say that it’s a bit like packing a suitcase for vacation. If you just dump a drawer of clothes into your suitcase, you might be alright, but it’s definitely not efficient. But if you take time to figure out what you’re going to need, and plan things out a bit, you’ll save a lot of space.

Resizing can also save a lot of bandwidth for your users, and keep your images lean and fast. It can be a bit trickier when you bring in mobile-device support along with all the various screen sizes your visitors might have, but there are some basic things we’ll talk about that, at least, get you moving in the right direction. Using the suitcase analogy, using the wrong size image is like packing clothes for 4 weeks when you’ll only be gone for 3 days. And it really does add up that quickly.

For example, if you have an image that is 1600 pixels wide and 1600 pixels tall, and it is displayed on the page at 400 x 400, the percentage of wasted “canvas” is well over 90%. You have to think in 2D a bit, because 1600 x 1600 = 2.5 million pixels total, whereas 400 x 400 is a mere 160,000 pixels.

Wait, what’s a pixel

That’s pretty important when we’re talking about resizing and the canvas size. So here goes.

A pixel is the smallest unit of display on a screen. It can be any of millions of colours, but it is only one single dot that makes up an image. In most image formats, a pixel is stored as the combination of the amount of red, green, and blue that are required to make that particular colour.

In the PNG and GIF formats, a pixel can also be partially or fully transparent, so that bit of information also needs to be stored for each pixel. With 4 bytes required for each pixel, that could make our images very large, very fast. Our 400×400 pixel image would require 640kb uncompressed (RAW), but as a PNG or JPG we can probably get that down around 50kb or less.

So let’s dig in a little deeper here, and see what we can do with our images to make things faster.

Compression

Even though the PNG or JPG formats already apply some compression, many images are not fully compressed. Compression takes time, and in many cases, compression is sacrificed to make saving the image faster. Just like our suitcase, if we try to rush the process, we get less than ideal results. Cameras and even many photo editors will not bother to fully compress an image.

There are two different types of compression that we can apply to our images. The first is ‘lossless’ and the second is generally called ‘lossy’.

Lossless compression is given other names by various WordPress image optimization plugins. Sometimes it is called “original quality”, others call it “normal compression”, but most just call it lossless – compresses an image without losing any information about the pixels in the image. Pixel for pixel, the original and the compressed image will be identical.

Lossy compression is much different and will get rid of some pixel information in an attempt to make the image smaller. In other words, we sacrifice some image quality for better compression and faster loading speeds. Lossy compression might be labelled ‘aggressive’, ‘glossy’, or ‘best saving’. Generally, the more you want to save, the more quality you have to give up. And for that reason, many dismiss lossy compression without giving it a second glance.

I was one of those “compression snobs” until I saw how well the newer algorithms preserved quality AND how much space they could save. I’ve done a significant amount of testing across various algorithms, and most of them are able to achieve anywhere from 30-80% compression with impressive quality. In fact, with the best ones, you can’t even tell the difference between the original and the compressed version. You would have to look at the file size to figure out which image is the original.

Metadata

One last consideration with either method is “metadata”. Sometimes called EXIF information, it can include all sorts of information like shutter speed, exposure, ISO, copyright, (ICC) colour profiles, etc. Very little of this information is worth keeping around, and it can take up a lot of space. Some software (I’m looking at YOU, Photoshop), will even embed thumbnails of the image within the metadata. Most of the time, you can remove the metadata to save space, especially with WordPress saving most of the pertinent details within the database anyway.

Still, there are a couple bits that can be worth keeping. If you embed copyright information in your images, then take care that the tool you’re using allows you to preserve metadata. Also, many optimization tools will remove ICC profiles along with the metadata, so if you use colour profiles, it is important to check what setting you to need to keep those intact.

Okay, that’s all well and good, but how do we get our images compressed?

Introducing EWWW Image Optimizer

There are many plugins available to help you with WordPress SEO. But of course, I’m a bit biased and I think the EWWW Image Optimizer is the best one available. (Side note: EWWW is an abbreviation for ExactlyWWW, but it’s also a bit of a joke, as in “EWWW, are those YOUR gross, huge, uncompressed images?”)

Moving right along… All the plugins have limits on what you can do for free – some limit the image size, some limit the number of images/month and some limit the type of compression you can use.

 

EWWW IO finds itself in the latter camp: Lossless compression is free with EWWW IO, but the premium lossy options are only available with an API key. You can get a free key though if you pay close attention when you install EWWW IO. At any rate, you can use just about any plugin for the compression side of things, like EWWW IO, Imagify or ShortPixel. Although, I would avoid Resmush.it (lower quality) and WP Smush (weak compression).

Another consideration when picking a plugin is if it will let you compress your existing images. Most include bulk tools, but WP Smush does not. The only way to use their Smush API on your existing images is to pay for a WPMU DEV membership. It’s also important to find out if you have any images that are stored outside the media library. If you do, you’ll need to choose a plugin, like the EWWW Image Optimizer, that includes the ability to scan other folders on your site for images that need to be optimized.

Resizing

As I mentioned earlier, resizing can be tricky when you try to account for varying screen sizes, but I’ll try to give you some tips here. One of the easiest things you can do is to use the resizing options built into the various IO plugins. There are also standalone plugins like Imsanity that will give you a little more control over what is resized and where. The downside to this sort of resizing function is that it is really only intended as a last resort or safety net. Unless you display all your media at the exact same size, even your logos and background images, getting your images down to the appropriate size is not going to happen so easily.

You can definitely save a lot of space, and make some progress on this front, but there is more than we can do. For example, if you had images that were 4000 pixels wide, and now you have them down to 1600 pixels wide, you have likely saved around 75% or more, which is nothing to sneeze at! But what if the image is displayed on the page at 400 pixels wide? Then we are still in the same situation described earlier, where we are wasting almost 90% of our pixels.

Fortunately, there are some things built into WordPress that can help, and your theme or plugin developers may already be taking advantage of this.

WordPress responsive images

The Responsive Images feature in WordPress takes advantage of the various sizes/thumbnails that are generated, and uses more modern HTML features to offer mobile devices alternative sizes of your images to load instead of the full-size original. By default, there is a thumbnail, medium, medium-large, and large sizes generated, and you can adjust the settings for these if you need to under Settings->Media. Themes and plugins can register additional sizes to be generated as needed, so this can add to the options that are available for varying screen sizes.

If you have a plugin or theme that is just blindly using the full-size original images, you can ask them to use the built-in WordPress functions to retrieve a more appropriately sized image. In case you’re curious (or you ARE a developer), here are a few of the functions in WordPress that will accept a size parameter to auto-select the closest resize/thumbnail available: get_image_tag(), wp_get_attachment_image_src(), wp_get_attachment_thumb_url(), wp_get_attachment_image_url(). The WordPress srcset function (wp_get_attachment_image_srcset) is also very useful for developers to make their code mobile-friendly.

Another thing you can do is to use one of the resizes in your content itself. If you upload images at 2000+ pixels because you want folks to see how awesome your products are, you don’t necessarily want to use the full-size image directly on the page though. When inserting media in the page, you can select a smaller, more appropriate size that will fit in the page nicely. Again, you can tweak the Media settings if none of the sizes is quite what you want. Or, you can even install the Simple Image Sizes plugin to register your own custom sizes if need be.

Auto-page checker and ExactDN

Lastly, there are a couple solutions that will check your pages to make some of these things automatic. The oldest one is the Photon feature of the Jetpack plugin. The option is now simply labelled “Image Performance”, but it does the same thing it always has. It hooks into all of the functions mentioned above, and will return an exact match, instead of just the next closest size. It will also look at the height and width parameters on the image elements and make sure your images are no larger than what the theme/plugin says they should be.

Now, if you’re going to use Photon, be sure that you check your pages thoroughly for wrong-sized images and decent image quality. Photon has some old bugs that can cause some very weird results. It also re-compresses nearly every image on your site, even if they don’t need to be resized at all.

The solution I do recommend is called ExactDN. It is built on the foundation of Photon with all of the known bugs fixed, plus some extra goodies like JS/CSS minification. ExactDN also looks for any gaps in the responsive images HTML markup and fills those in if necessary to make sure no device is left behind. However, neither Jetpack nor ExactDN can solve your image resizing woes if you are using plugins/themes that don’t leave any clues to follow.

Going Fully Automatic

There are two other benefits to these last two solutions. The first is that you get a CDN bundled in for extra fast image delivery via a global network of servers. The other benefit is that any image that goes through the CDN system is automatically compressed, without ever having to mess with your local images. ExactDN also features intelligent lossy compression instead of the faster/cheaper method used by Photon.

Unfortunately, ExactDN isn’t free, as there are a lot of costs associated with running the system, and I’m not filthy rich like Matt Mullenweg. But he deserves it, he brought us WordPress after all!

Ultimately, choose whatever solution fits your WordPress website and your budget, and make your website run faster today!