How To Serve Scaled Images On WordPress Using GTmetrix in 2019

How To Serve Scaled Images On WordPress Using GTmetrix in 2019

  • 1
    Share

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 scaled image. In this case you will get a notification from page performance tester tools to serve scaled images. Many people seems confused 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 GTmetrix tool.

So in this tutorial, I will share the way to scale an 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 is not only happens to the homepage. Sometimes some of your essential post 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 thats not the perfect solution for everyone 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 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.

 

Recently Published Articles

Top 10 fastest free WordPress blog themes for personal bloggers

Top 10 Best Cloud Image Storage for WordPress in 2018

How To Serve Scaled Images For Your Web page

Which image need 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.

serve-scaled-image

 

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 its appearing on your page.  Instead GTmetrix you can use page insight but both the tools will normally give you same result. (Update: The recent update of page insight tool doesn’t show the unoptimized images which is 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 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 you 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:

gtmetrix-serve-scaled-images

 

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 category like image, javascript and css. In page insight tool the suggestion for optimization should be appear like this.

 

pagespeed-insights-serve-scaled-images-warning

Caution: Google page insight tool doesn’t provide optimized image after 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 same to the file name that needed to be optimize 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:

check-for-serve-scaled-images

Caution: Make sure the year (2018) and month (07) should be 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 desired folder. A pop up will appear to confirm overwrite the previous file, then hit yes.

Pop up-serve-scaled-image

If you are using Cloudinary or other 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 pop up should be 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.

serve-scaled-images

 

  • 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 to each and every queries 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.


  • 1
    Share

Rupam Krishna Bharali

Rupam is founder of rankwordpress.in. He is a web developer, blogger, graphic designer and a well known game level designer from India. He also loves traveling, exploring new ideas and playing football.Let's connect on: twitter

This Post Has 7 Comments

  1. Clever guide Tom. Someone can barely find tutorials like this. Keep writing on this blog. I will surly bookmark this page.

  2. Thanks Aliver, cheers 😄

  3. Do I have to optimize all the images like this? Or it just takes for the homepage thumbnail optimization.

  4. Hi Jordi.

    As the page and post can auto configure the image or allow any size of image, you don’t have to scale them this way. However, scaling them into a decipline formate gives you a better look on the post.

    You only have to scale down the images for your homepage if you are using “recent post” formate. Having a custom homepage reduces the requirement of scaled thumbnails.

    Hope you get the answer.

  5. Great blog Tom. Keep doing your research and improve more and more. Best wish for you.

  6. Thank you Amar 😀

  7. I loved this post! I read your articles often and you always comes out
    with some great stuff. I shared this on my Facebook and my followers loved it!
    Keep up the good work. 🙂

Comments are closed.

Close Menu