How often do you test your website performance with GTmetrix or Pingdom? It’s a good practice to always keep checking your site speed, page size, and required request to get page contents. Among many other reasons, page performance may drop due to not serving the scaled images. In such cases, you will see a warning that recommends you to serve scaled images.
Many people sometimes get confused about how to fix this problem. So we will see how to get benefit from a testing tool (GTmetrix) + image optimizer to solve your problem. Re-optimizing the images and uploading can take some time but you have the advantage of the GTmetrix to save the required time to detect which image needs enhancements and what should be the ideal scale of those images.
Additional Note: I hope the following steps will help you to serve scaled images on your pages. If you find any confusion regarding this tutorial let me know in the discussion. Now let’s begin with the introduction of a scaled image.
What is a scaled image?
Scaled images are those which size matches exactly with the size defined by the HTML and CSS of your current theme. So depending upon your WordPress theme, scaling of images can be different.
Serving scaled images is important. It will increase your site performance, speed, and score – GTmetrix
For example, consider that your theme needs an image of size 180*90 for your homepage thumbnails. But while creating the post, you have uploaded the featured image of size 1200*550. In this case, while a visitor’s browser requests to get the image there will be multiple data transactions between your web server and browser in order to provide optimized version of the image before showcasing it to the user. So the delay will decrease your page performance.
Check the example below, this is an icon of a website (it can be any image in your site)
In such a case, the visitor’s browser needs to download the full-sized image you have uploaded and then scale it down to display properly on the homepage. So you are sending unnecessary bytes which will consume extra bandwidth + the server have to respond twice for a single image. That is definitely not a good idea.
Generally, in WordPress, an uploaded image automatically converted into different sizes. But sometimes the scaled image issue still appears. And this does not happen to the homepage only. Some of your essential posts or page can contain images that need to be scaled properly.
Let’s find out how will you overcome this issue and optimize your website.
How To Serve Scaled Images For Your Website?
#1. Detect The Required Image Size
To serve scaled images, first of all, you need to know what is the required size of the image. This information either can be found in your theme settings or you can perform a quick test on GTmetrix, and it will tell you what size the theme is asking for.
Quick note: While fixing this issue you can keep the respective image sizes required for different locations on your website, so that next time you can upload the correct size
To benchmark, your page images visit gtmetrix.com and enter your page URL in the blank box then click on Analyze.
After analyzing GTmetrix will give you the page performance with specific details. Now you need to go to page speed tab and look for serve scaled images warning. If there are no images to optimize then it’s fine, otherwise, you need to scale the recommended images. The images with issues should show up like this:
In the above recommendation, GTmetrix says that you need to resize the image from 100*100 to 25*25. So 25*25 is the size your website theme wants for that specific image. This is how you can find the actual required size of the images which will fit in the theme.
After getting the image size, the next step is to download and re-scale the image.
#2. Download And Re-Scale Images
You can see that GTmetrix gives the URL of the images using which you can check the image. Now that URL makes your task little easier by providing quick access to the problematic images.
Go to the image link – open it in a new tab and save the image in your local storage. To avoid mixing images you can create two new folders and name them as “downloaded image” and “optimized image”.
After downloading each image you should resize the images according to GTmetrix and keep that in your “optimized folder”. Make sure you have verified the recommended size in GTmetrix before scaling the images.
In terms of rescaling, you can use any image editing tool (online or offline) according to your preference.
There is a free online tool called iLoveimg where you can resize, compress, convert your images into different formats. You can give it a try because I found that tool very user friendly and fast.
(How to resize image in iLoveimg)
This is a quick example of how you can resize the images in three clicks on iLoveimg.
First, go to the website (https://www.iloveimg.com) and select resize an image. Upload an image from your local folder “/downloaded images” to this image editor. After uploading the image set the width and height (make sure the maintain aspect ratio is unchecked) then click on the resize image button.
It will take 1-2 seconds and the resized image will be automatically downloaded. There will be an option for downloading resized images manually too. Don’t forget to move the resized image into the “optimized image” folder.
#3. Upload Resized Image And Replace The Older Version
Now its time to upload those images into your web host directory so that the serving scaled images warning disappears from GTmetrix while testing your page. One thing you have to remember that while uploading the image the directory should see an overwrite confirmation to the previous image.
If that overwrite notification does not pop up that means the image is being uploaded to the wrong location. You can check the original image path on the GTmetrix warning itself.
Check the image below,
To upload images configure an FTP client or you can use Cpanel file manager too. If your website is created with WordPress then your path should be using this format public_html > WP-content > Uploads > Select Year> Select Month > Upload the image.
After uploading the images to the image directory it’s time go for the verification whether serve scaled images warning is disappeared or not. But before rechecking the site URL in GTmetrix you need to perform one last action. Let’s see what is it.
#4. Clear Your Website Cache
If you have configured any caching plugin earlier such as Cloudflare, autoptimize, total cache, or similar tools, you should clear your cache before testing your site on GTmetrix if the serving scaled images warning is gone or not.
In this image, I’m using Cloudflare to clear my cache but if you use any other caching plugin then clearing cache on that plugin will also work.
Remember that, if you have a caching plugin in WordPress website + you have configured your site with Cloudflare too then clearing the cache on both is extremely necessary. The reason is that both are separate tools and clearing caching on one tool will not remove the cache files on another.
Step by step tutorial on how to configure autoptimize plugin with your WordPress website.
Cloudflare is very effective. Its “always online” technology is really useful for your website. With Cloudflare, you can improve your website performance and response rate. Moreover, it provides a free plan so you can implement Cloudflare on your site and experience their service before purchasing their premium plans.
#5. Recheck The URL In GTmetrix
Once all resized images uploaded to the website host you have covered most of the essential steps, now it’s time to verify whether it worked? This part is very simple, go to GTmetrix and analyze the same URL and wait for the result.
Check whether the warning are gone or not!
On the above example, you can see the previous recommendations of serving scaled images are gone and I have no further image suggestion scale images in that particular page.
You need to apply this procedure on every page of your site so that this issue does not appear again.
Wrapping up: Optimizing your page and fixing it’s issues is a great skill. Not all people are up to it but these practices will help you make a better website and search engines will prefer your pages more. If you try to provide valuable information + a better experience for readers and search engine bots as well, finally you can achieve your goal with more exposure.
Follow our social media profiles on Twitter and Facebook 🙂
Need help with getting stuff done? Try Fiverr! You can find content writers for your website at a reasonable rate.
Alii rationibus definitiones qui ne, dolorum elaboraret eam id. Sed brute nonumes repudiare no.
Quo eu aliquam vivendo argumentum. Ius lucilius forensibus complectitur no, modus libris cu eum, an purto detracto vituperatoribus sit. Cu altera numquam nec.
Med brute nonumes repudiare no. Modus electram ex pro.