Optimise images for web publishing, improve your user experience and Google pagespeed rating.

Optimise images for web publishing, improve your user experience and Google pagespeed rating.

Your website speed can hugely be affected if you are not taking care of optimising your web images. Optimisation suggestions are provided if you run a test on pagespeed, the google tool to asses your website speed, usability and more.

Running a pagespeed test is as easy as visiting the page and entering your website address. Also lightspeed can be integrated in your CI pipeline if you have the technical and knowledge resources to run these test, but I will write a post about lightspeed integration in another article.

When testing on your site you will get some suggestions on what images size might be if optimised. Also pagespeed provides other suggestions about lazy loading off-screen images but this article will focus on the the use of the convert command to generate optimised images.

As show on https://developers.google.com/speed/docs/insights/OptimizeImages convert can be used on your machine for instance to optimise JPGs as such

convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_optimised.jpg

To avoid manually running the command with each single photo I have published a small script that uses convert to optimise jpg images present in your current folder.

To run the optimisation you can

1. git clone the repository `git clone git@github.com:bizmate/bash-essentials.git ~/bash-essentials`
2. cd the folder with your last photoshoot or products folder
3. run `~/bash-essentials/bin/web-image-optimiser.sh` <- notice you can place the bash script anywhere in your machine as long as you call it when you are inside the images folder

The result will yield new images with the _optimised suffix in their name.

An example of an optimised vs original image

Sicilian flavour original flour image 41 Kb

Original link to non optimised image and without our website optimisation -> http://www.bizmate.biz/wp-content/uploads/2020/10/IMG_1291_800px.jpg

Sicilian flavour optimised for web flour image is only 21 kB compared to the 41kB of the original image.

Original link to optimised image and without our website optimisation -> http://www.bizmate.biz/wp-content/uploads/2020/10/IMG_1291_800px_optimised.jpg

As you can see above this optimisation can make a massive difference. We have seen size reduction of at least 50% in our images and although it might be lower at times it is still a great optimisation.

And can you see any difference between the images?