How to Optimize, Resize, and Serve Scaled Images with WordPress

How to Optimize, Resize, and Serve Scaled Images with WordPress

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.

In this post, we’re going to focus on how to serve scaled images with WordPress. 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.

Here’s everything you need to know about optimizing, resizing, and serving scaled images:

What Are Scaled Images?

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.

Blurry Image Scaled Up
This image is too small and was scaled up with the HTML width attribute

On the flip side, if an image is too big, the browser will shrink it down to the right size. This doesn’t affect how the image looks, but it will add to the file size of the page.

The Complete Guide to Mastering Image Optimization

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. They go on relying on the browser to serve up the right size, because that’s what the browser is for, right?

Wrong.

Screenshot of Google Pagespeed Insights
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.

(Source: developers.google.com)

Delivering an image that is too large hurts you in several ways.

  1. 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.
  2. Second, if you’re uploading a full-size selfie straight from your phone, but you’re displaying it as a small Gravatar, then you’re wasting time and data downloading an image that is excessively large.
Hummingbird optimize images
An example suggestion in Hummingbird to compress and resize an image.

Enter scaled images. A scaled image is an image that has been sized to fit the exact dimensions you’re using it for. 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. Since we’re all about optimization here at WPMU DEV, when I create images for blog posts I make them exactly 600px wide. 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.

The Ultimate Mega Guide to Speeding Up WordPress

Site speed optimizers such as HummingbirdGTmetrix, and Google PageSpeed Insights will recommend scaling images to improve performance.

Screenshot of GTmetrix Serve Scaled Images Message
GTmetrix will say “serve scaled images” if your images are too large and are slowing down your page, serve

Srcset and Size Attributes

Aren’t the srcset and size attributes supposed to take care of image resizing?

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.

The srcset attribute works by providing the URL for the image and then giving the browser a list of images to choose from at various sizes. This set of sources for that cell phone selfie I mentioned earlier would look something like this:

srcset= “selfie-100x100.png 100w, selfie-200x200.png 200w, selfie-400x400.png 400w”

Above, WordPress is telling the browser, you know more about the user than I do, here’s the image you want in 3 different sizes, choose the one that will work best.

When the browser needs to display a 75px x 75px Gravatar next to a comment, it will choose the first option in the set and resize it slightly. If the user has a retina device, it will choose the second option.

This cuts down on some waste, but scaling will allow you to get that extra bit of performance.

Serving Scaled Images in WordPress

To get started, you need to know the dimensions of the images that will be used on your site. I’m talking banner images, hero images, blog post images, Gravatar etc.

Watch our quick tutorial on how to detect incorrectly sized images in WordPress.

QO6mXR2WbLk

We want to know what is the largest size that each image will ever be displayed at since we know that everything over this threshold is useless.

For example, let’s say I want to use a photo of the ocean on my site’s home page. The image in its unaltered state is 4534px x 3023px.

Screenshot of large ocean photo in media library
I haven’t done anything to alter the size of the photo…yet

For an image in the body of a blog post, you’ll probably need to serve an image between 600px-960px wide and for hero featured images that span the width of a desktop computer screen, you’re looking at something in the 1600px width range.

Also keep in mind that you’ll need to double these sizes to accommodate retina screens. The largest size that 1600px image will need to be is 3200px.

To find the size that the image needs to be in order to fit perfectly, we’ll look for the image on the site and open up the browser developer tools.

If you’re using Chrome, right-click on the image and go to Inspect. In Firefox, select Inspect Element.

Screenshot of how to open Chrome Developer Tools
You can also use Ctrl + Shift + I

In Chrome, when you hover over the URL for the image, you’ll see the size that the image is displayed at with the original “natural” image size in parentheses. That large image file is what your visitors are downloading.

Screenshot of chrome developer tools with image size
The image is over 3000 pixels too large, what a waste.

This is similar in Firefox. Once you inspect the element, you’ll notice that next to the image are the dimensions.

Screenshot of firefox developer tools
This tells us the image size we need

Now that we know what size we need the image to be, we can resize images properly in WordPress in several in different ways.

Crop Images in the Media Library

To manually crop an image, go to Media > Library and click on the image you want to crop. Then, click the Edit Image button to open the editing interface.

Attachment details for an image
View an image’s attachment details, then click the Edit Image button.

Scale or crop the image as needed using the corresponding options on the right. Keep in mind that if you scale the image to match the width you need, the height may be shorter or longer than the defined size in your theme depending on the dimensions of the original image.

If you choose to scale your image, it remains in proper proportion relative to the original image. On the other hand, if you decide to crop your image, it may not necessarily end up being edited proportionately depending on the dimensions you choose.

You can either scale your image by typing in your desired width and height, then clicking the Scale button or if you prefer to crop your image, you can do so by clicking and dragging your mouse over the image and selecting the area you want visible. Then, release your mouse click to reveal your selection.

9 Hidden Features in the WordPress Media Library Only Power Users Know

You can click and drag the squares on the edges and sides to make any necessary adjustments to the width and height or you can enter the exact dimensions you want into the Selection field on the right.

You also have the option to enter your desired aspect ratio for the image:

The aspect ratio is the relationship between the width and height. You can preserve the aspect ratio by holding down the shift key while resizing your selection. Use the input box to specify the aspect ratio, e.g. 1:1 (square), 4:3, 16:9, etc.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

You can also click and drag your selected area to move it to the exact area you want visible.

If you cropped your image by selecting an area of it with your mouse, click the crop icon above your image.

An example image being cropped.
Scale or crop your image to fit the size defined by your theme.

Next, choose which pre-defined image size where you want your changes to apply under Thumbnail Settings. This option can be helpful if you want to edit the image while preserving the thumbnail.

For example, you may want to have a square thumbnail that displays just a section of the image.

When you’re done making your changes, click the Save button below your image.

The attachment details screen. The Save button and Thumbnail Settings are highlighted.
Select which image sizes where you want to apply your resizing, then click Save.

You can also manually resize your images while you’re editing a post or page by clicking on the Add Media button above the editor.

Then, click the Media Library tab and choose one of the listed images. Next, click the Edit Image link to the right to access the same editing interface mentioned above.

The Insert Media screen of a post
You can also manually resize an image while editing a post or page.

How does WordPress Resize Images with the Media Settings?

If the images you need to manually resize are the default sizes WordPress creates, then you can try editing them via your admin dashboard’s Media Settings.

The default WordPress image sizes are thumbnail, medium, large and full-size, though, full-size refers to the original dimensions of uploaded images and can’t be changed in the Media Settings. To edit the original image, refer to the details above.

To manually resize the default image sizes, go to Settings > Media and enter the max width and max height you need for the applicable image size you want to change in the corresponding fields.

If you need to change the thumbnail size, you can also optionally keep the check box selected to crop the thumbnail to the exact dimensions you specify. Normally, thumbnails are proportionally edited automatically.

When you’re done, click Save Changes at the bottom of the page.

The Media Settings
You can edit the default WordPress image sizes through the Media Settings.

Keep in mind that these sizes can be used in multiple places in your theme so you may end up editing images that you don’t want resized. You can also add custom sizes to WordPress.

Once you have saved your changes, install and activate the Regenerate Thumbnails plugin to resize the images you have previously uploaded to adhere to the new dimensions you just set.

Edit File in Paint

Open up your image in Paint, Adobe Photoshop or your image editor of choice. We’ll use the dimensions we came up with in the Developer Tools.

Screenshot of resizing image in Paint
How to resize an image in Paint

In Paint, go to resize in the home tab. A box will open that will allow you to enter the new dimensions. Select the pixels radio button and then edit the horizontal dimensions. The vertical dimensions will automatically be resized if the maintain aspect ratio check box is selected. That is what we want. If the box isn’t checked, you’ll need to do the math yourself.

When you’re done adjusting the dimensions, click ok. Then you can save the file in Paint, re-upload to WordPress and replace the image with the new file.

Optimizing Images with Smush

Smush and Smush Pro can save you a lot of time when you start optimizing your images.

Wrong Size Detection

Both Smush and Smush Pro have an option for wrong size detection in the plugin settings. If you’re like me and forget to resize your images every once in a while, this feature will help you see which images are slowing down your site.

When you visit your site, images that are either too large or too small will appear with a yellow outline.

When you open the information tab (see the yellow “i” icon?) Smush will let you know what is wrong with the image size. Thanks Smush!

Screenshot of Smush Wrong Size Notification on site front end
Only admins will see the highlighted image and error message

To enable this feature in Smush and Smush Pro, go to your plugin menu and in the Tools section, enable Detect and show incorrectly sized images. Then save to update your settings and see incorrectly sized images on the front end of your site.

Smush Settings Detect Wrong Size Images
This feature is available in the free version of Smush

Auto Image Resize

Want to keep yourself and others from uploading super humongous images so you won’t eat up so much of your hosting storage space? Smush and Smush Pro can help.

In the Smush plugin Bulk Smush settings, head to the Image Resizing section and enable Resize my full size images. Before an image is uploaded to your media library, Smush will resize it to fit the width and height you specify.

Screenshot of Smush settings
Notice how Smush tells you what the largest size image on your site should be and then doubles it for Retina devices.

Smush also gives you the option to keep a copy of the original image.

Screenshot of Smush Settings to Save Original Image
Nervous about messing up your images? Keep the original

This feature essentially cuts the excess off your largest image.

One down, hundreds to go.

But what if you want to get all your uploaded images to be the perfect size without having to go through the steps above and scale every image manually?

Easy, become a WPMU DEV member and get access to Smush Pro’s lightning fast CDN (or just get Smush Pro on its own).

While your host may include a CDN with your hosting account to improve the performance of your site, Smush Pro’s CDN was designed specifically with image optimization in mind.

Not only will the Smush Pro CDN deliver your images at lightning-fast speeds, but our CDN will also serve up the perfect size image for your users. In other words, leave the scaling to us!

Screenshot of Smush CDN welcome screen
You’ll need to configure the Smush Pro CDN with a couple of simple steps

The Smush Pro CDN can even help you if you’re having trouble with Google PageSpeed’s ‘Properly size images’ suggestion.

Screenshot Smush Pro resize images CDN
After pushing the Get Started button, you’ll reach the CDN configuration settings.

Just enable the automatic resizing option and the CDN will deliver the right size image for you while keeping your original images untouched. How’s that for cool?

Image Scaling Solved

As you can see, there are multiple ways to properly size images in WordPress, but it can be a tedious process if you have a mature site with a lot of images. 

Rather than throwing your hands up and saying, “oh well that’s the user’s problem” and leaving your images as is, I suggest using a plugin like Smush to solve the problem in five minutes instead of five days. You can also try Smush Pro and get additional image optimization benefits like ultra compression. Your users will thank you. And you’ll probably see lower hosting costs since you won’t need so much space.

It’s a win-win.

If you haven’t taken a look at Smush in quite some time, it’s time for a revisit. We’ve added a lot of new features and Smush Pro is way more powerful than before. Smush Pro was already the leading image optimization plugin, so that’s saying a lot. Check it out, you won’t be disappointed.

What tricks are you using to resize and compress your images? Have you tried WP Smush Pro to scale your images? Share your tips in the comments below.

Tags:

Felicia Ceballos-Marroquin Felicia is a WordPress expert, specializing in web design/development, search engine optimization, Genesis, and enterprise WordPress multisite. She is a former WPMU DEV author, where she put her decade-plus of WordPress expertise to good use, writing friendly tutorials with soul.