Google's page speed test thinks I should optimize my images by more than the image size currently is

I'm really confused with this one as it seems impossible to do.

When running my site through GTMetrix I pass great but with Google page speed insights it's insisting my images can be optimized more for instance:

Compressing and resizing…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction).

The image in question is 65KiB so how Google thinks I can shave another 78.5 off it I don't know.

I'm using jquery unveil and using the retina function on it too could that be the problem?

Also I've tried downloading the images Google provides as their compressed version but these images have had their dimensions changed so would look terrible if I put them at their intended size.

Really confused, any help would be appreciated.



2 Answers Google's page speed test thinks I should optimize my images by more than the image size currently is

Depending on the image compression package that you use, you might get different compression results. I've noticed that sometimes Google's Page Speed is able to optimise an image further than I have been able to (and other times not!)

Do you have a live URL for your web page? Or even the image? It helps to be able to see it live and compare!

2 year ago

There are few things you need to distinguish before proceeding with optimizing images for Google Page Speed.

  1. Images are optimized for different platforms (Desktop and Mobile)
  2. Images are optimized for physical size.
  3. Reports for images can be "Compressing and resizing" and "Compressing" only. Compressing means u need to do a compression part, on other hand compressing and resizing means you need to use appropriately sized image for appropriate platform.

Depending on the report you are looking at (desktop or mobile), your item "Compressing and resizing…ets/img/homepage/my_image.jpg could save 78.5KiB (94% reduction)." needs to be less in dimensions and compressed or just less in dimensions. Margin for resizing an image with CSS is around 20% so if you got 100x100px image you can resize it to around 120x120px with CSS without getting report on that item (that is if you also optimized it physically also). To check this in Chrome, inspect image and check "Natural" size in element selector.

You can deal with this on few ways:

  1. Media Query (note that you have to use background image in this case)
  2. Srssets
  3. JS

2 year ago