Search code examples
google-pagespeedpagespeed-insightsgoogle-pagespeed-insights-api

Updated Pageinsights compatible Image optimzation commands for JPG & PNG


The Document at https://developers.google.com/speed/docs/insights/OptimizeImages has a deprecated warning message.

And the link to updated document doesnt contain details about recommended convert commands.

Is there any change in Optimization requirement of updated Version of Google Pagespeed Insights?

convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png

convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg

I also checked the samples in Github page of Pagespeed Insights API, but nothing mentioned about Optimizing images.


Solution

  • Short Answer

    Images must have at least 85% compression if jpg. For PNG remove the alpha channel if not transparent. You should also use an optimisation tool such as tinypng for pngs to remove as much weight as possible (although Lighthouse won't report this)

    Long Answer

    This guidance has been replaced with two different documents (as far as I can tell)

    https://web.dev/uses-optimized-images/

    and

    https://web.dev/uses-webp-images/

    The first document being the main one.

    All this guidance is basically saying is "do not send more information down the wire than is needed".

    If you send uncompressed JPEGs for example you may be sending a file that is 2,3 or even 4 times larger than a JPEG at say 70% quality. The difference in quality would be hardly noticeable but the speed difference could be huge if you have multiple images.

    The requirement is that the compression level is at least 85%.

    What lighthouse does is check the file size after setting the compression level to 85% and if you get a file size saving of more than 4Kb it will show a warning for an image.

    With regards to how you achieve compression that is entirely up to you and whatever server environment / language you are running.

    If using the convert binary in your example perhaps sample at 4:2:2 for chroma subsampling and set the quality to 75, screens are a lot more vibrant since that guidance was written so colour is more noticeable than the difference in quality between 85% and 75% compression. This is purely a suggestion though, you do what is best for you.

    The second document I linked is what you should be doing where possible, using WebP images in compatible browsers.

    This isn't a direct replacement for the document you linked but can result in much smaller image sizes at comparable quality.