Today we are going to see how we improved website speed by 33% / 2 seconds by just compressing images.
We will also show you the easy step-by-step process that you can follow to achieve same or better results for your website.
By combining two tools, we made our website 29% lighter and 33% / 2 seconds faster .
But first let’s look at how fast our website was.
Step #1 – Check your website speed on GTmetrix
We will use a tool called GTmetrix.
To check your website page load speed, simply enter your URL in the corresponding field and click Analyze
GTmetrix will give you an overall performance score, based on PageSpeed and YSlow.
It will also give you details about the areas that need improvement.
As you can see the website is a bit slow, 6 seconds. You can also see in red or orange / yellow the areas that can be improved.
Image compression is just one of the many areas of your website that you can optimise but it is an important factor for page load speed, which is how fast your web pages load.
By optimising page load speed you will improve your website SEO and user experience.
To reinforce that, Optimize images is the top recommendation by GTmetrix scoring a low F (29).
Let’s then dig a bit deeper and check what images need optimisation
According to GTmetrix by optimising these images we can save 91.1kb, which would result in a 15% reduction.
Pretty good, ah? Are we sure we cannot do better than that?
Of course we can and this is where TinyPNG comes to our rescue
Step #2 – Analyze your website image compression on TinyPNG
What’s not to love about a panda helping you with image compression?
TinyPNG is the tool we have used (and still use) for optimising many of our images.
They also have a tool, similar to GTmetrix, telling users how much they can save from optimising their images.
It’s very easy to use
Upon entering your site URL, the tool will show you the optimized image size, the total savings and the consequent, faster page load speed
TinyPNG says we can compress our images and save 1.5MB, which will result in 32% savings! Quite a big difference, ah?
Most importantly, TinyPNG estimates that just by compressing the images, we could increase the page load speed by 1s!
Seems like a good deal, so let’s try optimise one image from our page on TinyPNG (with the free version you can optimise a batch of up to 20 images)
As a test, we choose one of the food images. The original size is 1500×1000 for weight of 197.2kb – 202kb depending on the tool used.
We then upload the image onto TinyPNG image compressor and this is what we get: -28% savings, which means our image now weights ‘only’ 114.4kb
It seems already a good improvement but what if we could do better than that?
This is where ImageResize.org comes along
Step #3 – Optimise your images on ImageResize.org
ImageResize.org is a suite of image tools you can use for free to resize / crop an image, change its ratio or compress it, which is what we are going to do.
Let’s upload the image onto their image compressor tool and see what happens
Wow did that just happen?
We went from 197.2 to 58.1kb and saved 71%. This is amazing!
In case you have some doubts on the quality of the optimised images, you can compare them below:
Fantastic! We saved 139kb on one image alone!
All we have to do now is bulk-upload the remaining images from the homepage (for a maximum of 20 at the time) and then replace the ones on the website.
Easy, right? But here’s the strange thing. If you upload the image that you just compressed with ImageResizer.org onto TinyPNG, if further optimises the images
Step #4 – Re-optimise your images on TinyPNG
Here’s our original image, slimmed down to 58kb. What happens if we now upload it onto TinyPNG?
We saved another 5% on the previously-optimised image (although TinyPNG sees the file slightly bigger 59.5kb).
You might say that the benefits are minimal but if you have a lot of images it might still be worth re-optimising them.
Now let’s check again on GTmetrix and see how we do
Our image optimisation score went from F (29) to D (61). Most importantly, we brought the overall page load speed down to 4.3s.
Better but still not enough. GTmetrix tells us we can still save 47.5kb
Step #5 – Use GTmetrix optimised images
This time we will go with GTmetrix advice and replace the flagged images with the ones it recommends
After clicking on ‘See optimized version, the GTmtrix-optimised image will open in another tab.
We then save the image on our machine and replace the corresponding one on our website.
We repeat the process until we have covered all the images flagged.
Let’s see now how we score on GTmetrix
Boom! Our image optimisation score went from D (61) to A (99).
Additionally, our overall PageSpeed score improved to B (80%) and turned green.
Most importantly, our overall page load score is now down to 4s.
We improved our page load speed by 2 seconds and only by optimising our images!
I hope you liked this article. If so it would be great if you could leave a comment and let me know.
Also, if you are interested in these type of tutorials, don’t forget to sign up to our newsletter.