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%.
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.
How To Properly Size Images
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.
You can also manually check if images are too large. Right click an image > 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. Some 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 (or PageSpeed Insights) and the error should be fixed.
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:
Step 2: Find your mobile background dimensions provided by GTmetrix:
Step 3: Install an Adaptive Images plugin (I recommend ShortPixel or Adaptive Images).
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/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.
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 “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
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
Imagify
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 Speed Tutorials?
Here are other tutorials I wrote:
- WordPress Speed Guide (this guide took forever)
- How To Setup WP Rocket (the cache plugin I recommend)
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
