PageSpeed Insights stopped recognizing optimized images

[M Rohani]

All the images on our site (designforbooks.com) have been optimized for weeks and PageSpeed recognized this until yesterday when it starting reporting all the images as not optimized and giving the site a low 38/100 score. We double checked the images using ImageOptim and they are fully optimized so there is no way to fix a problem that doesn't exist. Are other people having this problem? 

[André Böker]

Yes we discovered the same problem and I am analysing it for 2 hours now. JPG files may not have a high quality. If we compress them with 60% in photoshop and use tinyjpg the filesize is ok for pagespeed insights tests. But if we want to use high quality jpg files we loose points. 

Now we have 2 options. Use bad quality jpg files or convert everything to png

[André Böker]

Is your mobile usibility still 100/100 , we lost some points there as well but there are no screenshots available

[Sextozone.com Shop Best Sex Toys]

We have same issue today. 

From 90/100 getting 64/100

Do you guys know if it some type of goolge issue like a bug, or those are official changes? :((

[André Böker]

This will be permanent change. Google offers you optimized images to download with same size as your images but stronger compression.

We will change our mediamanager to optimize images automaticly on upload with http://jpegclub.org/

[Analytics Managed]

It's not that you're not optimized, it's just that Google Page Speed Insights now has an amazingly good lossless compression service that is beating the pants off of everything that I can find (latest versions!).

[André Böker]

Please stop talking bullshit.

I just made a test with a cloned page with 2 optimized images on each version.

page size 694 kB

file-sizes 1. image 154kB @1920px width quality 99%

file-size 2. image 112kB @1920px width quality 50% 

The only difference between both pages is on the 100/100 test the images were in a full width container.

On the second test which failed to get 100/100 the images were put into a default container which has a maximum with of 1400 px and paddings left and right,

So Google tries to render the page and makes mistakes in analyzing the images. The optimized images which google offers then in a optimized content zip are scaled down to 234px width for mobile and 626px for desktop.

This is not optimizing images on websites. this is destroying good looking websites. On Full-HD or U-HD Displays this looks so shitty. 

I expect Google to fix it's pagespeed test to be more exact in analysing websites. If Google would say server a scaled image for smartphones by using the picture element, ok. That's something to work with. But ruling two pages with the same files different because one page uses padding left and right to display it with good layout is inacceptable!!! 

[Sextozone.com Shop Best Sex Toys]

Hey Andre. 

That exact why I'm worry because all images were downloaded from those offered by google. We did it before almost half of year.

You mean from here correct? 

So it sounds like google not happy to see pictures that actually were offered for downloading by google. 

[Shane Bishop]

You don't have to settle for bad quality, there are tools like TinyJPG.com and JPEGmini.com that give you similar (or better) compression results with minimal quality loss.

[Caorda Managed Analytics]

Actually Shane, you are wrong. There's no need for any quality loss. The sites you've loyally advertised in multiple threads employ lossy efforts that should actually never get used by professional optimization teams.

Here's the thing, you can get a 100% score in pagespeed without any quality loss. Prior to the 11th the JPG versions Google offered were losslessly compressed and you could get the same savings or more using free open source binaries. There's a drag n drop tool for windows that's 100% free and fast, just search 'fileoptimizer' and never visit the sites you're advertising ever again.

Once Google's Web Analytics team realizes that they flipped on some lossy settings in the PageSpeed Insights test, at ~8pm PST on Sunday the 11th, they should revert this mistake.

After that you can rest assured that the lossless results will score 100% and you don't need to degrade your images at all. (Plus you can stop uploading them to a website and then downloading them - just use the drag n drop tool for free..)

Apparently the folks at Google see so many incorrect posts on here that they don't even look very often. :(

[Rick Steinwand]

But can you tell the difference with the images side-by-side?

[Caorda Managed Analytics]

I posted an example earlier of the reduced color pallet and how it changed one of the previously optimized images quite a bit.

On photos it's really hard to see, but on logos/fonts it's easy to pick the fuzzy/lossy compressed copy from the Google optimized zip download.

[Joshua Marantz]

Hi -- I just wanted to chime in on a few points.  I think I've made them before on this forum, but they are worth repeating:

• IMO, photos can usually be lossy-compressed by a quality of 80-85 and it should be very hard to detect any difference in the context of a web page. If I want to print the image on a poster that's a different story.  They can also be transcoded to lossy webp for further byte reductions.
  
• PNGs and GIFs should be losslessly compressed.  Logos should be rendered as PNGs or GIFs, or lossless webp.  Fonts should be in, umm... font files (eot, woff, woff2 etc) and are a whole 'nuther topic.
• Resizing is another technique at our disposal.  If you have a 16 megapixel image and are displaying it in a 100x100 thumbnail, you are wasting bytes and slowing the page.  This is orthogonal and can be combined with image compression and transcoding.
• mod_pagespeed automates all of this, and tries very hard to give users a great image experience, balanced with minimizing the number of bytes downloaded.  It does this in a way that's sensitive to image content, page context, and client capabilities (mobile, webp-capable, and whether 'save data' is turned on in chrome).

Caveat: there are some sorts of websites (photos as art, medical imaging come to mind) where lossy compression of photos is not acceptable.  But for 99% of the web it's fine (IMO).

I also think it'd be nice to offer a UX so that if you click on an image that's not otherwise clickable, it should give you the full-res version instead of the auto-optimized one.

Disclosure: I work on mod_pagespeed, but I am not an authority of the policies of Pagespeed Insights.  However, we definitely would like to know if you have mod_pagespeed installed and:

• You get dinged in PSI for image optimization on same-domain assets. This *can* happen if mod_pagespeed's image-resizing is not set to its aggressive mode (resize_rendered_image_dimensions), so we already know about that case.  That's because MPS by default only resizes to width/height attributes specified in the img tag or inline CSS.
  
• You have image quality issues on your website with MPS default settings (CoreFilters).

Disclaimer: there are tons of other image WP plugins, drag & drop optimization sites, online services, CDN features, etc. that have overlapping functionality with mod_pagespeed's optimization stack.   I don't know much about any of those, and can't comment on what they do to your images or bandwidth :)

-Josh

--
You received this message because you are subscribed to the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/df9994b9-ad4e-4596-aafa-8fd1bd89963e%40googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[Caorda Managed Analytics]

Yay! Nice to see something close to an official-ish reply in here!

Here's a great way to look at the change that happened on Sunday night:

If you'd gone through a whole site, page by page, on the 10th, downloading all the optimized files Google PageSpeed offers you, and did all that work to replace the files from the unsorted 'optimized zip' contents, 2 days later, on the following Monday, your work would all be invalid.

I'm pretty sure that's NOT what the team was intending and I'm just as sure that they need to roll back the change they deployed on Sunday night. I just don't know how to get someone on that team to read this.

[is...@jomashop.io]

Maybe you can poke the people in charge of page speed insights :)?

Even with Lossy compression we do not save the amount of KB that page-speed insights is recommending:

• Compressing http://cdn2.jomashop.com/media/gallery/banner_main_movado.jpg could save 65.6KiB (50% reduction).

We used kraken.io for the lossy compression and there is only a 39.68kb savings.

So what is the criteria for how you save the 65.6KiB? WebP? WebP isn't supported globally yet.

[André Böker]

you will have to save the image f.e. in photoshop at 60% quality and then make lossless compression f.e. with tinyjpg.com and you will have the good pagespeed score. But the image has bad quality then.

On my test yesterday I recognized images are only punished if an image doesn't use the full width of the brower.

I think that is pretty bad, what Google did here.

[Мария Дубровина]

The same problem. I use TinyPNG or Optimizilla services to compress my images. PageSpeed Insights didn't show any problem with images before. But few days ago problems appeared: google shows that compressed images can be compressed more on 10-14%.

I conducted an experiment: uploaded original jpg file (333.2 kB) on my server, checked it with PageSpeed Insights. Of course, red recommendation to optimize my image appeared. I compressed the original image with PageSpeed Insights. File size became 90.7 kB. I uploaded this file on the server and checked the page again. Red recommendation disappeared. After that I tried to optimize original image with TinyPNG. Compressed file was 69.6 kB, i.e. TinyPNG compressed the file better than PageSpeed Insights. After uploading the file and checking the page I got red recommendation again!

So... We need an official reply... It's very strange behaviour!

[Rick Steinwand]

I have no problems with the rotating banner (full-width) on my home page, but I'm docked for GA caching time and YouTube vid. Page score 98%.

I have a gallery page that has about a dozen 1/4 page width images and GA cache time problem and page score 99%.

All my images were saved via Paint.Net at about 80%, using progressive encoding (optimized jpg plugin), then uploaded to tinypng.com, and were all done last summer. My score has not changed with recent changes.

If you're having trouble achieving Google's specs on your own, maybe you need to use progressive encoding for your jpgs?

[Tadas Karpavičius]

Hi, Maria,

I am using TinyPNG as well and I get bad scores consistently. 
Did you manage to solve this? Maybe switched to another service?

Thanks,
Tadas

[Shane Bishop]

Hi Tadas,

If you're using TinyPNG, stop worrying about what Pagespeed says, it's inconsistent at best, and worse quality than TinyPNG. That's why PSI has such a hard time recognizing TinyPNG's compression, it expects more quality loss. In my testing, TinyPNG beats PSI compression by an average of 5-10% (across 30k images). So sometimes it's worse, but most of the time it's better compression, and TinyPNG is always higher quality than PSI. There are other factors in play here too, but the quality loss is one of the big ones.

As a further example, I have a client who had an image that was around 180kb. PSI said it should be 112kb, and we compressed it with TinyPNG down to 107kb. Then we retested with PSI, and it said it needed more compression, down to 105kb. Do we care? No, we've achieved the goal already of having drastically smaller images, no matter what PSI says. It's time to move on and see if they have any other useful steps for us to make our site faster. You can also check it with gtmetrix.com and you'll get (generally) more useful information that will help you pinpoint any remaining problem areas that are actually affecting load times. I especially like the waterfall view which lets you see exactly what resources are slowing down your site (or if your server just has a horrible response time).

Best,

Shane

[Rick Steinwand]

Shane, you're missing the point. When PSI says an image could be 105kb, it means with no loss of quality. I've had good luck saving jpg's as progressive encoded before sending to TinyPng and currently get no warning from my images. So the message is legit and ignored only if you're satisfied with a mediocre score. 

Tadas, the first thing you need to do is make sure your images are properly sized. GTmetrix is great for telling you that info. https://gtmetrix.com/

[Shane Bishop]

I'm not sure if you're implying lossless, or just "no visual loss of quality", but PSI is certainly not lossless. There is always a loss in quality, while it isn't always obvious, it is pretty much always measurably worse than TinyPNG.

I recommend all my customers use TinyPNG, and some of them still get bogus alerts from PSI.

That said, and as you noted, there can certainly be legitimate alerts from PSI if the user has not properly sized the image to start with, so I see your point there. But that's why I pointed him towards gtmetrix, because it would eliminate the risk of a bogus alert and only flag images that need scaling or that haven't been compressed at all.

[Rick Steinwand]

My point was to save your jpg's as progressive encoding and upload them to TinyPng. I started doing that last summer and I never had a problem when PSI changed their algorithm last fall.

[Мария Дубровина]

Hi, Tadas!

Unfortunately, problem still persists. I tried to use other services, but got the same messages from PSI. Now I'm making the following steps:
* Compress images with TinyPNG;
* Checking my page with PageSpeed Insights;
* Compress images from the messages with PSI.

It seems that number of images that PSI doesn't like has becomes less. When I wrote the previous message, PSI had offered to optimize each my images. Now most of my images is OK for  PSI, it offers to optimize just some of them.

среда, 3 января 2018 г., 17:42:27 UTC+3 пользователь Tadas Karpavičius написал:

[Ari]

I think the key here is that JPG's signal to google that the images should be lossy, if you want lossless images use png's and compress them.

--
You received this message because you are subscribed to a topic in the Google Groups "pagespeed-insights-discuss" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pagespeed-insights-discuss/Zwd3a-MmMrk/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pagespeed-insights-discuss+unsub...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/c491db94-5b29-454d-b3c3-ff3b32d63af8%40googlegroups.com.

[Shane Bishop]

I was really trying to leave this thread alone, but I just can't stand by and watch folks follow bad advice... sorry Ari, I just can't.

Please don't recommend that people convert JPG images to PNG just to get PSI to stop complaining about them. If an image is smaller as a PNG, then by all means, replace the JPG with a PNG, but that is very rare.

Does converting to PNG work to silence PSI? Yes, absolutely!

But the whole point here is to make your site faster. In this case, by means of making your images smaller, and lighter. The ultimate goal is to increase visitor engagement (hopefully revenue as well).

When you convert photographs to PNG, it will dramatically increase the size of the images (3x, 5x, possibly 10x or more), and it WILL have the opposite effect of what you were trying to accomplish.

If you want to check your results after compressing images, use gtmetrix.com (as has already been recommended multiple times). While PSI is great for testing when you haven't compressed your images already, and I wholly agree that lossy compression is appropriate in the majority of cases, you need to understand an important "blind-spot" in the PSI test:

If you use TinyPNG (which is amazing), one of a dozen (or more) other tools that use similar algorithms, or really, anything besides the exact method used by PSI, it will NOT be able to detect the amount of compression applied in all cases.

PSI doesn't know which algorithm you used, it cannot detect what quality setting you used (no one can), and it isn't as clever as we wish it was (see below for what it actually does).

In the majority of cases, TinyPNG beats PSI in both quality and compression. In the majority of cases, PSI will indeed admit that you've fully compressed your images (as Rick and others have confirmed).

But there are some images where TinyPNG (and similar tools) will refuse to compress an image as far as PSI wants to. And there are other cases, where PSI will still recommend additional compression, even when you've already beat their original compression numbers.

If you know that you've compressed an image with TinyPNG, don't use a lossy tool to re-test it. Lossy compression just doesn't work that way. You could even test your results by re-compressing them with TinyPNG, and you'd see the same problems, because even the TinyPNG algorithm itself cannot detect, with 100% accuracy, if you've already run TinyPNG on an image.

For those who want to know what PSI actually does:

1. It attempts to estimate the quality level used on the JPG, based on artifacts and other clues that would be present when using ImageMagick.

2. If the estimated quality level is greater than 85, they use ImageMagick to compress it at quality level 85 and see if that is smaller than your original image. They likely also use jpegtran afterwards, since ImageMagick doesn't produce fully-optimized Huffman tables.

See their docs here: https://developers.google.com/speed/docs/insights/OptimizeImages#optimizations-for-gif-png-and-jpeg-images

Can I guarantee that's what PSI does? No, but that's what their devs claimed, and their docs suggest. And regardless of that, I've learned enough about how JPG compression works to know what is (and is not) possible, while helping thousands of folks optimize their images using TinyPNG and similar tools.

[Khoa Tran]

On Tuesday, December 13, 2016 at 11:48:04 PM UTC+7, M Rohani wrote:
> All the images on our site (designforbooks.com) have been optimized for weeks and PageSpeed recognized this until yesterday when it starting reporting all the images as not optimized and giving the site a low 38/100 score. We double checked the images using ImageOptim and they are fully optimized so there is no way to fix a problem that doesn't exist. Are other people having this problem? 

Since there is no way to download an optimized image from Pagespeed Insights, I have created the tool to follow the stickly Google document for auto optimize image that can be passed the validation. Feel free to give me any comment and feedback!

https://freetoolonline.com/insights-image-optimizer.html

[Prathamesh Gharat]

I checked the PageSpeed score of your homepage, presently Google PageSpeed highlights next-gen image format for your images.

I'm listing out two different ways, that I'm aware of, to solve the above. CloudFlare and lazysizes.js.

CloudFlare pro (Paid $20/month) offers a feature called Polish along with many other features which you could explore which takes care of image compression and next gen image format (WebP).
Ref: https://blog.cloudflare.com/introducing-polish-automatic-image-optimizati/

Ref: https://www.cloudflare.com/plans/pro/

Note: CloudFlare does not have a lazy-load images feature. (Mirage is similar to lazy-load but won't help you in all cases)

The other manual way would be (only if you are into coding or could hire someone)

1) Generate webp versions of your image. (file name should be predictable)

2) Implement lazysizes.js (webp + normal image formats + responsive sizes)

Ref: https://developers.google.com/speed/webp/docs/using

Ref: https://www.tezify.com/how-to/seo_friendly_lazy_loading_images/

Ref: https://github.com/aFarkas/lazysizes

There is also a mod_pagespeed + varnish combo we used to implement long time ago but it has some drawbacks compared to above in terms of time required for maintaining various configurations specific to websites and then modifying them according to changes on websites. Compared to mod_pagespeed, above solutions are more predictable.

I would like to add that PageSpeed insights offers recommendations (not requirements), it does not improve your search engine ranking directly. But indirectly there is a possibility that it does (i.e. faster loading site -> people prefer your site and browser / search more / etc -> search ranking improves slowly over time). So you should try to get whatever is technically and financially possible.

I believe you should work towards improving your time to first byte (TTFB) before the image optimization which can be done easily using server side (or CDN side) HTML caching.

I glanced through your site and it seems to be mostly static and could benefit from this.

Faster loading pages = better conversion rate.

---------------

We do provide consultancy and/or implementation services for optimization of infrastructure (Server + CDN) and website. We could try to help you lower your server/website infrastructure costs per month in addition to improving your PageSpeed score. If you are interested feel free to contact us. Google 'KraftPixel'.