When you get a “properly size images” opportunity in Google PageSpeed Insights, you’ll know it is time to scale some images. According to Google … Ideally, your page should never serve images that are larger than the version that’s rendered on the user’s screen. Anything larger … just results in wasted bytes and slows down page load time.
Delivering an image that is too large hurts you in several ways. One, it distracts the browser forcing it to perform additional server requests. Instead of delivering a webpage as fast as possible, it needs to stop and resize the image. That takes time my friends, especially if your webpages are image-heavy.
Enter scaled images. A scaled image is an image that has been sized to fit the exact dimensions you’re using it for.
Why Do Scaled Images Matter?
Serving scaled images is one of the most overlooked ways to deliver better site performance. Are your images holding your WordPress site back? Images take up a lot of file size space, especially if they’re bloated and oversized. That’s why images should be number one on your list of things to optimize if you’re trying to improve page speed, conversions, or sales.
You’ll learn how to properly size images in WordPress in several different ways and how to improve your image optimization workflow tremendously with Smush Pro. Images on the web have to fall in the Goldilocks zone. Not too big, not too small. They have to be just right. If they’re too small and they are scaled up, they’ll be blurry.
This doesn’t affect how the image looks, but it will add to the file size of the page. Since you can’t see a change in quality, the extra weight on the image files becomes easy to overlook. And since most people don’t know there is a problem, they don’t fix it.
Why Not Just Crop?
Unlike cropping, which may ultimately alter the proportions of an image, scaling preserves the dimensions. If you’re reading this post on a full-size screen, then the body of this post has a width of 600px.
That is the exact size I need so the browser doesn’t have to do any additional work and so you don’t have to use more data. Site speed optimizers such as Hummingbird, GTmetrix, and Google PageSpeed Insights will recommend scaling images to improve performance. Yes and no. You want peak optimization right? If you do, srcset and size will help you get closer to the ideal image size, but won’t always give you the exact size you need and it won’t cut the excess on the largest size.
Don’t Manually Resize Your Images
Do you ever manually resize images for your WordPress website? Many of us use a theme with a maximum content width. If that width is, say, 800 pixels, there’s often no reason to upload an image wider than 800 pixels. There are exceptions, of course, like art or photography sites where visitors may want to download or zoom in on a larger image.
If you are devoting time to your WordPress site resizing images before you upload them, why not let a plugin do it for you? Automatically!
Allow me to introduce the descriptively-named Resize Image After Upload plugin. It does as its name suggests, as well as performing another handy trick. Let’s take a look.
In the left column navigation, mouse over the “Plugins” link and click the “Add New” link. In the “Search plugins…” box, enter “Resize Image After Upload.”Once you have located the plugin, click the “Install Now” button. Click the “Activate” button. In the left column navigation, mouse over the “Settings” link and click the “Resize Image Upload” link.
Make sure to click the “Update Options” button down at the bottom of the page after making any changes. In the “Re-sizing options” section, the “Enable re-sizing” drop-down option should be set to “yes” by default. If it isn’t, we want to set it to “yes.”The “Max image dimensions” settings are where we will control the size of the resized images.
Since we aren’t concerned with image height, we’ll set “Max height” to 0 (so the plugin will convert the height in proportion to our new width, and not to a specific pixel size). The “Compression options” section controls the image compression level for JPEG images. The compression level directly affects the image quality.
A high value, a higher quality image. Of course, the higher the image quality, the larger the image file. So you always want to strike a balance between quality and download speed. The plugin author recommends setting the “JPEG compression level” to 90, but I believe that’s unnecessarily high. You’re creating large images at a compression level of 90.
Go With a Smaller Compression
For my sites, when processing JPEG images, I use a compression value of 70. Below that, I start to see some degrading of the image. But—to my eyes— there’s very little difference between 70 and 90. So I regularly take the size reduction I get by using 70. As I mentioned earlier, if your images are being processed for an art or photography site, size may take a back seat to quality.
If you want to force your compression value on uploaded images, set “Force JPEG re-compression” to “yes.”The “Image conversion options” section lets you choose whether to convert PNG images to JPEG. If you upload photographs in the PNG format, you may want to use this conversion feature. Photographs in the PNG format are large files and can always be made smaller by conversion to JPEG with little noticeable loss of quality.
To activate PNG to JPEG conversion, select “YES” in the “Convert PNG to JPEG” drop-down. I’m starting with a 1. 6 MB image file, with dimensions of 2512 x 3467 pixels. Let’s see what happens when I upload it. As you can see, the file size was reduced to 144 KB (a 91% size reduction!), and the dimensions to 800 x 1104 pixels.
This isn’t mentioned in the documentation for the plugin, but the image resolution was also reduced from the original resolution of 240 pixels per inch to 96 pixels per inch. That’s an appropriate reduction since 72 or 96 dpi are the standard values for web images. The plugin will not resize existing images, only newly uploaded images.
That means the original file is not maintained on your site, and also, any EXIF data embedded in the original image will not appear in the resized image. In terms of ease of use and effectiveness, I rate the Resize Image After Upload plugin right up there with the most useful WordPress plugins you can install.
We hope this helps you resize images like a pro. Check out our other blogs here.