0

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 mysite.com/…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.

Thanks

cshelswell
  • 83
  • 2
  • 11
  • Without a link to the site there is nothing I can do. I'm sure I visit raunchier sites than yours. Put the link in a comment. Be sure to reference me in the comment so I will get a notification. – Misunderstood Feb 14 '17 at 05:39

2 Answers2

0

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 mysite.com/…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
Marko Manojlovic
  • 356
  • 1
  • 10
  • Ok this sounds interesting thanks. I've not heard of this angle yet. As soon as I get a chance I'll try this one out - thanks! – cshelswell Feb 19 '17 at 06:18
-1

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!

Deano
  • 2,805
  • 3
  • 29
  • 42
  • It's an ecommerce site of more of an adult nature so thought it best not to add the URL but can if it would help. It's not that Google's got better compression though. Google is simply rescaling the image down to make it smaller. I can do that myself pretty easily but it's going to make my site look pretty bad. – cshelswell Jan 22 '17 at 20:45