How To Serve Scaled Images In WordPress (Item In GTmetrix)

Home » WordPress Speed Tips & Tricks » How To Serve Scaled Images In WordPress (Item In GTmetrix)

Need to serve scaled images in WordPress?

This just means you need to resize large images to be smaller.

GTmetrix tells you which images need to be scaled and the correct dimensions they should be cropped or resized to. Next, resize (scale) the image and replace old images with the new ones.

Serve Scaled Images

Since GTmetrix only shows unoptimized images for the single page you’re testing, start by scaling sitewide images images that appear on multiple pages (your logo, sidebar and footer images). Next, run your other pages through GTmetrix and scale individual images on those.

Can I use a plugin to automatically scale 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 scaled accordingly).

Create an image dimension cheat sheet.
The best way to avoid serve scaled image errors is to learn the dimensions of each area of your website (sliders, widgets, logo, fullwidth blog images, etc). Next, create an image dimension cheat sheet listing each area’s dimensions. If you follow your image dimensions cheat sheet and resize images before uploading, you should never have serve scaled image errors again.

 

1. Find Oversized Images In GTmetrix

Run a page through GTmetrix and view serve scaled image errors in the PageSpeed tab. Expand their recommendations and you’ll see the correct dimensions each image should be resized to. Keep in mind GTmetrix will only show errors for the single page you are testing.

Serve Scaled Images GTmetrix

You can also manually check if images are scaled. First, right click and 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 different in size. That means the image needs to be scaled. By comparing the two variations of your image side-by-side, you can see how large the image actually is (and why the page it’s on might be loading very 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. Many 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 and you shouldn’t have serve scaled image errors anymore.

100% Serve Scaled Images

 

5. Serve Scaled Images On Mobile

Serving scaled images is different on mobile.

If you sign up for a free GTmetrix account, you can test your mobile website 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 from 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 and it needs to be scaled, 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 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 serve scaled 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)
  • Fullwidth 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 Serve Scaled 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 Images Optimizations

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

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

Image Optimizations In GTmetrix

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

I also have an awesome video on WordPress speed optimization:

 

Frequently Asked Questions

✅ Can I use a plugin to serve scaled images?

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

✅ What is the easiest way to scale an image?

Download the image, crop/resize it in a program like Photoshop or Gimp, then replace the old image with the new one.

✅ Which images should I start scaling first?

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

✅ Where do I find an image's correct dimensions?

GTmetrix tells you the correct dimensions of each image when you expand the item in the PageSpeed tab.

✅ How do I fully optimize an image?

Scale it to the correct dimensions, compress it and remove EXIF data using an image program or a plugin, then make sure you specify image dimensions (set the image's width and height) in the HTML.

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

Cheers,
Tom

Subscribe
Notify of
guest
0 Comments
Inline Feedbacks
View all comments