Website Tune Up Tool Tip #3 - Your pages will load faster by resizing and rescaling images
Re-sizing or Re-Scaling Images
Initially to check the performance, speed and scaling of the posts on my websites, I was using GTMetrix. It was free and generally speaking, I could run as many tests as I wanted to, providing the server wasn't overloaded.
Then on December 18, 2020, I was discovered the number of tests would be severely restricted unless I signed up to a free account. The developers had also completely revamped the testing procedure. What I was very familiar with, had now changed dramatically.
Worst of all, GTMetrix now has no before and after scaling figures for images. To me, they just turned the greatest test site available, into almost a piece of junk.
There's still useful functionality and I can still use it to log the performance and structure figures as a record for myself. It offers a lot, but they've dropped the image scaling figures. I hope they reconsider this at some stage, perhaps if enough users complain?
What to use for Image Resizing and Re-Scaling?
I searched around and came up with ImageKit, which does provide before and after scaled images. I find some of the file size figures hard to believe, such as the optimization figures on some images, as I know ShortPixel has already been at work on this post.
With GTMetrix behind us and ImageKit for scaling images, here we go.
In the video below, we use our 32V8 Website Tune Up Tool to grab the first post on https://seadragonlife.com/ and run the ImageKit test on it to check for potential images that need scaling.
Instead of loading a file sized at 1000 x 1000 pixels into a placeholder size of 300 x 300 pixels, you make the image +20% or x1.2 of the smaller size. This works out to be 360 x 360 pixels.
I never make any image smaller than 300 x 300 pixels unless it is some sort of icon or navigation arrow.
The last thing you want is for your image resolution to deteriorate at all. Images should be of the best possible quality you can get. Mobiles are a little more forgiving than PCs. The 20% provides a little bit of wiggle room in case you increase the width of a sidebar panel or whatever.
Explanation of the Scaling of the Image as seen in the last Video
The ImageKit site gives us this information about the last image in the video:
Correctly resize image to 709 × 498 as per layout.
You are loading a 1280 × 900 image.
Using my figures of x 1.2, it means the new scaled image should be 851 x 598 pixels
I use IrfanView for all of my scaling work and it only needs the first figure to work, so we will make the re-scaling using 851.
As it turns out with this specific image, it starts off not scaled as 56,750 KB, and after scaling becomes 73,312 KB. Strange, are we winning? Well, not until you compress or optimize the scaled image. Then it works out at 47 KB after ShortPixel is finished with it.