Seeing serve scaled image errors for your WordPress site?
To serve scaled images in WordPress, expand this item in GTmetrix and view which images are too large. Next, resize (scale) them to the correct dimensions which are provided by GTmetrix, then replace the old image with the new one. This fixes “serve scaled image” errors in GTmetrix.
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, full width 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.
How To Serve Scaled Images
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.
You can also manually check if images are scaled. First, right click and 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).
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.
You can also crop and resize images directly in WordPress:
3. Replace The Old Image With The New One
Upload your new image to WordPress, then replace the old image with the new one.
4. Retest The Page In GTmetrix
Retest the page in GTmetrix and you shouldn’t have serve scaled image errors anymore.
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:
Step 2: Find your mobile background dimensions provided by GTmetrix:
Step 4: Set the dimensions provided by GTmetrix as the background maximum width.
Step 5: Rerun your site through GTmetrix’s mobile test to make sure there are no errors.
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.
Step 3: Copy the new image’s HTML and paste it into the “Replace With” field.
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.
- 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
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.
EWW Image Optimizer
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
Looking For More WordPress Speed Tutorials?
Here are other tutorials I wrote:
- How To Setup WP Rocket (the cache plugin I recommend)
- Cloudways vs. SiteGround (the two top hosts I recommend)
- How I Got 100% GTmetrix Scores (WordPress Speed Guide)
I also have an awesome video on WordPress speed optimization:
Frequently Asked Questions
How do you fix serve scaled image errors?
Download the image, resize it to correct dimensions provided by GTmetrix, then replace the old image with the new one.
Can I use a plugin to serve scaled 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 scaling 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 tells 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 serve scaled image errors on your WordPress site, leave me a comment with your question and I’ll help you in any way I can.