If you’ve ever run a speed test with GTmetrix.com, WebPageTest.org, or PageSpeed Insights, you may have seen a warning about resizing or scaling your images. If so, it can be a daunting problem to solve. You may be thinking, “Didn’t I already optimize my images? Why do they need resizing?”
Fortunately, WordPress has some built-in image resizing tricks. Plus, some plugins for WordPress can help solve the resizing problem. Before we jump into those, lets learn a bit more about what resizing and scaling means.
Why do I need to resize my images?
The root of the problem is that we have images in our page that are larger than the space where we are displaying them. The screen size of the visitor’s device affects this also, but let’s look at a basic example. Let’s say that you have some images displayed on your page at 80 pixels wide by 80 pixels high. However, what if you exported the images out of Photoshop at 300 x 300 pixels? The browser will downsize those images to fit in the display space, resulting in a lot of wasted pixels.
A glance at the numbers might indicate that we have an image a little over 3x larger than it ought to be. Alas, images are two dimensional constructs, so we have to think in 2D. The browser wanted an 80 x 80 image, which is 6,400 pixels. Instead, we sent them a 300 x 300 image, which has 90,000 pixels! Some basic math tells us that we wasted nearly 93% of the pixels in that image. In real life, there is some overhead to the resizing process, so we might not save exactly 93% by resizing. I recently saw a site with that exact scenario, and the savings were 91% with a resized image. Woah!
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 colors, but it is only one single dot that makes up an image. Most image formats store a pixel as the amount of red, green, and blue for that particular color.
In the PNG and GIF formats, a pixel can also be partially or fully transparent, which uses one more byte per pixel. With 4 bytes required for each pixel, that could make our images very large, very fast. A 400×400 pixel image would require 640kb uncompressed (RAW). With the PNG or JPG format, we can probably get that down around 50kb or less. Further, if our display size was 80 x 80, like the previous example, that image would end up around 5kb, which is a pretty drastic improvement.
First, you need to know what size you are supposed to make your images. While a testing site might give you this information, it’s worth knowing how to find this information yourself. I show you exactly what you need to be looking for in this video:
There is also a “Resize Detection” option in the EWWW Image Optimizer that will highlight these images for you. This can be a real time saver so you don’t have to test every page on your site with GTmetrix.
So now that we know what the problem is, let’s dig in a little deeper here, and see what we can do to make things faster.
Basic Resizing
The first thing you can do, is to use the built-in image editor for WordPress to scale/crop your images. For a newly uploaded image, look for the Edit Image link on the right-hand side in the Attachment Details. For an image already in the content, click the image, then hit the Edit button (pencil icon) and finally, click Edit Original to get into the image editor. If you only have a few images, manual resizing can work pretty well. However, if you have a lot of images, this process can get tedious quickly.
So, one of the easiest things you can do is to use the resizing option built into EWWW IO. There are also standalone plugins like Imsanity that exist solely to resize your images. Unfortunately, we can really only use this sort of resizing function as a last resort or safety net. Unless you display all your media at the exact same size, including 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, but there is more that 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 page is displaying the image at 400 pixels wide? Then we have the same situation described earlier, where we are wasting almost 90% of our pixels.
Fortunately, WordPress has some built-in features that can help, and your theme or plugin developers may already be taking advantage of this.
WordPress Responsive Images
In addition to using various image sizes for different purposes (logos, headers, widgets, content, etc.), things get even trickier when you start thinking about the various devices your visitors might use. Many of these will have different screen-sizes. Any modern theme will have a responsive design, which adapts to the screen size of the device. But what about the images?
By default, WordPress creates 4 resizes/thumbnails for every image you upload to your site. Your theme, or other plugins you have installed, may add additional sizes to be created for each upload.
The Responsive Images feature in WordPress takes advantage of the various sizes/thumbnails that are generated. It uses modern HTML features to offer alternative sizes of your images to mobile devices 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, adding 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 the developer(s) 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.
Using the Right Size
Another thing you can do is to use one of the resizes in your content itself. You might upload images at 2000+ pixels because you want folks to see how awesome your products are. But you don’t necessarily want to use the full-size image directly on the page. When inserting media in the page, you can select a smaller, more appropriate size that will fit in page better. Again, you can tweak the Media settings if none of the sizes is quite what you want. You can even install the Simple Image Sizes plugin to create your own custom sizes.
Going Fully Automatic
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. Jetpack now labels it “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 Easy IO. I built Easy IO on the foundation of Photon and fixed all known bugs. Plus it has some extra goodies like JS/CSS minification and Gzip compression. Easy IO also looks for gaps in the responsive images markup and fills those to make sure no device is left behind. As an extra measure, Easy IO has a lazy loader (as of early 2019) that can solve your image resizing woes if you are using plugins/themes that don’t leave any clues to follow.
More Speed for Your Images
There are two other benefits to these last two solutions. First, you get a CDN bundled in for fast image delivery via a global network of servers. Second, the CDN system compresses all images viewed by your visitors. The CDN does all of this while leaving your local images untouched. Easy IO also features intelligent lossy compression instead of the faster/cheaper method used by Photon.
Unfortunately, Easy IO isn’t free, as there are a lot of costs associated with running the system, and I’m not filthy rich like Matt Mullenweg. Not that I begrudge his situation at all, he deserves it, since we wouldn’t have WordPress without him!
Ultimately, choose whatever solution fits your WordPress website and your budget, and make your website faster today!
