Google PageSpeed Insights Optimize Images Compressing and Resizing

Question

Google PageSpeed Insights is saying that I should compress and resize several images.

Here's an example:

I saved this image using Photoshop's Save for Web JPEG High preset:

What can I do to this image to avoid Google's "compress and resize" warning?

Answer 1

This is what works for me and JPEG to be on the safe side of PageSpeed Insights.

File > Save for Web & Devices

Not only do you need to find the right compression settings but also you need to stick to your img tag actual dimension. If you know your max width for img tag will be 555 px then save your JPEG to that dimension, not a pixel more ... as for how it goes along with retina display, it seems Google does not take this criteria in account right now.

If you are not happy with the resulting quality (and you might be if you have a designer ecommerce site) you need to bypass Google recommendation - knowing it could slightly penalize your SEO over someone else that actually stick to the rule.

Answer 2

Due to the small number of different colours that image seems to have, you'd probably get a much smaller image if you exported it as a gif, or png-8. Sitepoint has a useful article on when to choose which image format .

Answer 3

You don't mention if you are using the Chrome extension or the main website? Assuming the former you can actually download the optimised version of an image by clicking the 'See optimised content' link under 'Suggestions for this page'.

Img here: