Nowadays, web developers are no longer the only users of the Google tool PageSpeed Insights; website owners also like to run their websites through the “validator” in order to get advice on how to improve performance.
In this post we would like to talk about two pieces of PageSpeed Insights optimization advice that is related to images. Specifically, we are talking about the PageSpeed Insights suggestion: Optimize images > Properly formatting and compressing images can save many bytes of data.
1. Optimize Images: “Compressing … could save 4.7 KiB (30% reduction).”
In this case, PageSpeed Insights lists all images on the analyzed website that should be optimized. The suggestion is related to lossless compression/optimization of images. The reduction is size is achieved exclusively by removing unnecessary (meta)data from the image files. The quality of graphics is not affected in any way.
2. Optimize Images: “Compressing and resizing … could save 5.8 KiB (51% reduction).”
In this suggestion, the focus lies on “adjusting size”. Adjusting size means: the server has delivered images that are far too large (in terms of scale) that have been scaled down by the browser. You can save several KB by having images be delivered from the server in the right scale – not too small, but not too big either. This is especially relevant for Responsive projects.
Unfortunately, a lot of themes suffer from these teething problems: generic thumbnails are loaded in the blog frontend and scaled using CSS. Unnecessary work. In this case, the developer team responsible for the theme has to be confronted about the issues.
If images are available in the correct scale and have been optimized without loss, for example using the Optimus API, Google will not find any fault with your images.