Google Page Speed Insights – Lossy and Lossless Image Compression

Google provide us all with a plethora of useful tools (Google Analytics, docs, search, the android os, maps, the list goes on…) most of which are free. Among these is the Page Speed Insights tool – a useful resource of tips to make your site load faster.

First things first, Page Speed Insights is a computer program, not the gospel. Take its recommendations with a grain of salt or two. It’s a great resource but shouldn’t be treated as the final say in matters of site performance.

One of its recommended steps has always been to reduce image size. Making images smaller is an easy win, as sub optimised images can really slow down a webpage – especially if there’s a lot.

This brings us to the issue of image compression. Before Google recommended Lossless Compression. Lately however, in a further effort to reduce page load speeds across the web, Page Speed Insights tool has begun to recommend Lossy Compression.

This change was brought into effect towards the end of 2016, and it’s effect has been that many sites are reporting much lower page speed scores without any changes being made to their site or images.

Some Page Speed Scores have plummeted since Google have recommended lossy compression

The main difference between the two as far as you’re concerned, is that lossy compression reduces image size more than lossless compression, thus reducing page load speed that little bit more, which is good. The caveat is that lossy compression also has an impact on the quality of the image, which is bad.

Now, this is not so big of an issue, some lossy compression tools are able to retain most if not all the quality of an original image while reducing the image size considerably. To the extent that lossy compression does reduce your image quality however, be careful.

On one hand, the faster your page loads, the more likely people are to stay on your site. On the other hand, people need to see high quality images to arrive at a buying decision. Both affect your customer experience, and it’s a delicate tradeoff.

The problem is that PSI tool doesn’t know how much of the image’s quality you are willing to sacrifice. It also doesn’t know for certain how much the image can actually be compressed. So it guesses. The exact mechanism they use to guess is unclear, but the point is that ultimately it’s a guess.

The other problem is that retesting your site with PSI tool to verify that you’ve completed the steps will not always be accurate, and will sometimes be horribly inaccurate. It will usually tell you that further compression is possible, without acknowledging that it’s possible at the expense of the quality of your images.

To conclude: Google Page Speed Insights tool will tell you some, certainly not all of the ways that you can reduce the page load speed of your site. When it comes to compressing images, or any other recommendations for that matter, consult an experienced developer. There are often reasons why the recommendations are infeasible, or could cause more problems that they would solve.

An example of lossless vs lossy compression. Both images have been compressed – you mightn’t notice the difference given a quick glance, however upon closer inspection you can clearly see the second image is pixelated and of overall lower quality

Sources:

  • https://ewww.io/2017/01/06/pagespeed-insights-goes-lossy/
  • http://stackoverflow.com/questions/5451597/how-does-googles-page-speed-lossless-image-compression-work