How To Properly Size Images In WordPress (PageSpeed Insights + GTmetrix Item)

If you ran your site through PageSpeed Insights or GTmetrix, you may see a recommendation to properly size images.

To properly size images in WordPress, expand the item in PageSpeed Insights and view which images are too large. Resize them to the correct dimensions (found in your GTmetrix legacy report). Finally, replace the old image with the new one. Retest your site and it should be 100%.

Properly Size Images

Since PageSpeed Insights only shows unoptimized images for the single page you’re testing, start by resizing sitewide images that appear across your website (logo, sidebar and footer images). Next, run other pages through PageSpeed Insights and resize your images on those.

Can I use a plugin to automatically resize images?
Not likely. You can set a maximum width + height in most image optimization plugins. But different areas of your site call for specific dimensions (images need to be resized accordingly).

Create an image dimension cheat sheet.
The best way to avoid properly size image errors is to learn the dimensions of the different areas your website (sliders, widgets, logo, full width blog images, etc). Next, create an image dimension cheat sheet with each area’s dimensions. If you follow your image dimensions cheat sheet and resize images before uploading, you should never have properly size image errors.

 

1. Find Oversized Images In GTmetrix Legacy Reports

GTmetrix legacy reports show you the correct dimensions for your large images.

Create a free GTmetrix account and go to Accounts > Default to Legacy Reports > enable.

Run a page through GTmetrix and view the “serve scaled images” section. Expand their recommendations and you’ll see the correct dimensions these images should be resized to.

Serve Scaled Images GTmetrix

You can also manually check if images are too large. Right click an image > copy image address.

Copy Image Address

Next, paste the image URL into a new browser tab. If you compare the image shown on your website with your image URL, you will see there is a noticeable difference in their sizes. That means the image needs to be scaled. By comparing the two variations of your images side-by-side, you can see how large the image actually is (and why the page it’s on may be loading slow).

Scaled vs Unscaled Image

 

2. Resize Images To Correct Dimensions

Download the old image and open it in your image editing tool of choice (I use GIMP). Resize and/or crop the image to the dimensions recommended by GTmetrix. Some image editing tools let you compress images and remove EXIF data which will make the image load even faster.

Scaling Image GIMP

You can also crop and resize images directly in WordPress:

Scaling Image In WordPress Media Editor

 

3. Replace The Old Image With The New One

Upload your new image to WordPress, then replace the old image with the new one.

Unscaled Widget Image

Scaled Widget Image

 

4. Retest The Page In GTmetrix

Retest the page in GTmetrix (or PageSpeed Insights) and the error should be fixed.

Serve Scaled Images WordPress

 

5. Properly Size Images On Mobile

Properly sizing images is different on mobile.

If you sign up for a premium GTmetrix account, you can test your mobile speed on Android. Chances are you’ll see more serve scaled image errors if your site isn’t using adaptive images, which means automatically resizing images for mobile devices (this is usually done by a plugin).

Step 1: Run your site through GTmetrix’s Android Test:

GTmetrix Mobile Test

Serve Scaled Images On Mobile

Step 2: Find your mobile background dimensions provided by GTmetrix:

Maximum Background Width

Step 3: Install an Adaptive Images plugin (I recommend ShortPixel or Adaptive Images).

ShortPixel Adaptive Images

Step 4: Set the dimensions provided by GTmetrix as the background maximum width.

Background Maximum Width

Step 5: Rerun your site through GTmetrix’s mobile test to make sure there are no errors.

GTmetrix Mobile Test

Step 5: Configure other settings in your adaptive images plugin (ShortPixel includes WebP support, lazy loading images, smart cropping, and removing EXIF data). These can help too.

 

6. Resize Images On Multiple Pages

If you use the same image on multiple pages/posts and it needs to be fixed, you can resize the image, copy it’s HTML, then use the Better Search Replace plugin to fix it on multiple pages.

Step 1: Install the Better Search Replace plugin.

Step 2: Copy the old image’s HTML and paste it into the “Search For” field in the Better Search Replace plugin. You can use the WordPress Text Editor to see the image’s HTML. Note: Better Search Replace will only replace an image if it contains the exact HTML you enter in the plugin.

Better Search Replace For Images

Step 3: Copy the new image’s HTML and paste it into the “Replace With” field.

Serve Scaled Image HTML

Step 4: Select the tables (eg. posts) you want scanned and uncheck “run as dry scan.”

Step 5: Click “Search/Replace” and the plugin will replace the old image with the new one.

 

7. Create An Image Dimensions Cheat Sheet

As I mentioned earlier, you should measure the dimensions of all areas of your website so you can resize images before uploading them. You can find these dimensions in GTmetrix (only if you have properly size image errors) or you can also find them in your theme’s CSS stylesheet.

Example:

  • Slider images: 1900(w) x 400(h)
  • Carousel images: 115(w)
  • Widget images: 414(w)
  • Full width blog post images: 680(w)
  • Featured images: 250(w) x 250(h)
  • Yoast Facebook OG image: 1200(w) x 628(h) – step 11
  • Yoast Twitter OG image 1024(w) x 512(h) – step 11

680 Pixel Width Rectangle

My blog’s width is 680px, so every single image on this post has been resized to 680px.

 

8. WordPress Plugins To Properly Size Images

Most image optimization plugins have the option to resize images, however this is not very effective when trying to fix errors in GTmetrix, since different areas of your website called for different dimensions. It’s more for making sure your images aren’t absolutely enormous. As the Imagify plugin says, the maximum width should not be less than your largest thumbnail.

Smush

Resize Images Smush

Imagify

Resize Images Imagify

EWW Image Optimizer

Resize Images EWWW

 

Other Ways To Optimize Images

I wrote a full tutorial on optimizing images in WordPress which includes:

  • Compressing images
  • Serving images from a CDN
  • Resizing GIFS
  • Removing EXIF data
  • Lazy loading images + videos
  • Cloudflare Mirage, Polish, Hotlink Protection

GTmetrix Image Optimizations

Looking For More Speed Tutorials?
Here are other tutorials I wrote:

I also have an awesome video on WordPress speed optimization:

 

Frequently Asked Questions

How do I properly size images in WordPress?

Find unoptimized images in your PageSpeed Insights report, resize them to the correct dimensions, and replace the old images with the new ones.

Can I use a plugin to properly size images?

No, different sections of your website call for different image dimensions. You need to scale your images to fit those unique dimensions.

Which images should I start resizing first?

Start by scaling images that appear on multiple pages like your logo, sidebar, and footer images.

Where do I find an image's correct dimensions?

GTmetrix legacy reports tell you the correct dimensions of each image when you expand the item in the PageSpeed tab.

I hope you found this tutorial helpful! If you still have properly size image errors on your WordPress site, leave me a comment with your question and I’ll help you in any way I can.

Cheers,
Tom

About Tom Dupuis

Tom Dupuis 2017Tom Dupuis writes WordPress speed and SEO tutorials out of his apartment in Denver, Colorado. In his spare time, he plays Rocket League and watches murder documentaries. Read his bio to learn 50 random and disturbing things about him.

Subscribe
Notify of
guest
4 Comments
Newest
Oldest Most Voted
Inline Feedbacks
View all comments