Fix Serve Scaled Images Warning On GTmetrix [2021]

How often do you test your website performance with GTmetrix or Pingdom? Always remember to keep an eye on your site speed, page size and the total number of request.

Sometimes page speed performance may drop due to not serving the scaled image.

In this case, you will get a notification from page performance tester tools to serve scaled images. Many people seem confused about how to do that and search for third-party editing tools. Actually, re-configuring the uploaded image is not required because you can simply take advantage of the GTmetrix tool.

So in this tutorial, I will share the way to serve scaled image without using any image resizer at all. If you apply these steps to serve scaled images, all image issue on your web page will be solved including the lossless image problem. Before starting the tutorial, let’s begin with the introduction of a scaled image.

What does a scaled image mean?

A scaled image means those images whose size match exactly with the size defined by the HTML and CSS of your current website (WordPress) theme. So depending upon your WordPress theme, scaling of an image can be different for different themes.

Important Note: One of the main reason not to change your theme very often can lead to maximizing your work with serving scaled images more than once.

For example, consider that you need all the images of size 180*90 for your homepage thumbnails. But during the creation of your post, you have uploaded a featured image of size 1200*550.

In this case, the visitor’s browser will have to download the original sized image and then scale it down to display properly with the theme settings. Generally, in WordPress after uploading an image it automatically converted to different sizes. But still, sometimes the scaled image issue appears.

Serving a non-scaled image brings some extra work to the browser due to which the browser requires some extra time to load the page completely and ultimately the page loads slowly. This does not only happens to the homepage. Sometimes some of your essential posts can contain images that need to be served.

Now, what would you do to improve your website page speed? One solution is to upload an image which is already scaled to the size, that your theme requires. But at some point, that’s not the perfect solution for every one of us because it’s hard to know what exact size our theme require for the images. 

What is the advantage of using a scaled image

The advantage of having scaled images is a lower page size and hence faster load time. You can verify this statement by looking at the difference between page size and load time before not scaling the images and after serving scaled images for a specific page.

In my case, when I was warned about this problem, the web page took about 2.3 sec to load properly and the page size was 764 kb. And after fixing the issue with images it took around 1.2 sec to load with a decrease in page size to 397 kb.

So if you serve scaled images, website loading time will decrease with an improvement in site performance rate. Having a better site performance will boost your SEO and Google rank.

How To Serve Scaled Images For Your Web page

Which image needs to scale?

This is not possible to figure out which image needs to be scaled just by looking at the web page. So you need some tools to detect the issue with the images.

Anyway, this is not a hard task to detect those images as we are familiar with tools like Pingdom, GTmetrix, web-grader etc.

My recommendation is to visit GTmetrix or google page insight and test your domain and pages. If you find a warning to serve scaled images and then follow the steps provided below. Believe me, this will make your website load faster and improve your page score as well.

Example: The image below is the test result I had for this website. You can check this address www.rankwordpress.in if you wish to check.

It was tested on GTmetrix. So if you have anything wrong with your images, you will be notified by GTmetrix like this.

The links inside this image are the link of images that need to be scaled. To see which image need to scale you can click on that link and verify where it’s appearing on your page.

Instead GTmetrix you can use page insight but both the tools will normally give you the same result. (Update: The recent update of page insight tool doesn’t show the unoptimized images which are why my love to that tool just decreased by a lot)

What other tools will you need to optimize the images

I have already mentioned that the first tool you are going to use the GTmetrix. When the testing part is done you will need to use the following tools to fix the issue.

1. An FTP client or you need to have direct access to your Cpanel file manager.
2. You need to create an account on Cloudflare and configure your website with Cloudflare. Open a new window and select your domain on Cloudflare which consists the page having unsealed images.
3. If you are using Cloudinary to host your images then keep it open in a new tab too.

( I recommend to use Cloudinary which is a cloud drive that offers a huge space to host image and videos + lots of great tools are available to optimize the images. You can store about 4,50,000 images in a free subscription plan which also offers 11.5 GB managed storage and 23 GB monthly viewing bandwidth. Using Cloudinary is a good option for you if you don’t want to load all the images inside your host) Heading back to our main topic let’s follow the steps below.

Analyze The Website and Sub-pages

Check your performance on GTmetrix (I have already done it before in the first example) and got the optimize image warning. Let’s see another example:

After every image link, there should be appearing another link which says (optimized version). To download the optimized resources click on download optimized image on GTmetrix.

To upload it back to the website you need to unzip the files. I would recommend you to keep the downloaded file name same to the original file present on the web page. If it does contain some long string like (i838fu8fy8hwf4iy83ty398t99g3ig394) after the image size (720*350) then you can remove the string including the ( _ ) size.

When you delete the string by renaming the file then its ready to re-upload to your host. Same procedure if you have performed your test using Google page insight tool. This tool gives you all the files in a zip file where all the files will be classified by categories like an image, javascript, and CSS. In page insight tool the suggestion for optimization should appear like this.

Caution: Google page insight tool doesn’t provide optimized image after the Latest UI update.

Now upload the optimized files to your hosting’s file manager

As you have the file ready to upload check the file name once again. It should be completely the same to the file name that needed to be optimized during the test including the image size.

Once you verify that both the name are same then proceed to the next step. Open your FTP client and connect to your host or directly go to your cPanel file manager.

Go to root/wp-content/uploads/2018/07/ and upload the previously downloaded optimized file there. (Here the date is 2018/07 because I uploaded the file on July 2018.

You will upload the file according to your date) Here’s how to know where to upload:

Caution: Make sure the year (2018) and month (07) should be the same as your original file’s. By looking at the original URL you can know where you need to upload your optimized image. (Otherwise, your image will not be optimized)

Now upload the image to the desired folder. A pop up will appear to confirm overwrite the previous file, then hit yes.

If you are using Cloudinary or another cloud service to host your images then find the image address according to the image URL and upload the optimized version to the exact cloud drive. Overwrite popup should appear and then hit yes.

Purge all cache on Cloudflare

When uploading is done go to your Cloudflare account and select your domain name there. Then go to caching tab and purge all website cache to publish your current changes.

• Wait up to 30 seconds and now go to GTmetrix or page insight tool.
• Check the web-page once again to verify the problem is fixed or not.

You can solve all the images and get a 100% performance rating by using this trick to optimize images. Apply this procedure and this will help you to serve scaled image properly and keep your page healthy.

If you find any difficulty during the tutorial don’t hesitate to ask a question. Put your question in the comment section below. I will answer each and every query there.

Conclusion: Scaling image is a very necessary task for your website. So always keep an eye on your homepage and fix any kind of issue with the scaled image using this method. If you know any more good way to fix this issue please let me know in the comment section below.