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.
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.
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 different in size. That means the image needs to be scaled. By comparing the two variations of your image side-by-side,
[…]
This article was written by Tom Dupuis and originally published on Tom Dupuis.