The rules for images are dropping scores a lot!

[Miguel García Sánchez - Colomer]

Hi,

yesterday i'm on 98 and now in 63 because the images are they are bad compressed?... how is it possible? i'm always use optipng and jpegtran... what can i do?

[Miguel García Sánchez - Colomer]

I'm testing it and it's impossible... Dave or somebody take a look:

As you can see, the image Prueba.png it's optimized with optipng -o7 (maximum) and Optipng is telling that the image is "already optimized" and when i use the pagespeed online test i get the following error:

• "Compressing and resizing http://2.bp.blogspot.com/…AAAAAAAAOoI/l4mn38vZpLo/s1600/Prueba.png could save 92,6 KB (97% reduction)."

97% it's impossible because the image it's already optimized (and when it was compressed the image size was optimized 3%)... maybe the rule are making the validation with "reversed" conditions

What can i do???

[Dave Mankoff]

Howdy Miguel.

Thanks for calling this out. This is a new change that we have rolled out to only a small subset of users. We are now recommending image resizing where we think it can make a signficant difference. It sounds like this is affecting your pretty hard. Maybe there's a bug on our end, and you can help us track it down.

In short, we think this is coming from the fact that your images don't match the size that they are displayed at. In some cases, you display them at a smaller dimension, and in some cases you display them at a larger dimension.

On mobile, for instance, you take the image that you linked which is 260x265, and display it at 315x250. We think there's a bug in our scaler related to trying to _grow_ images (260 -> 315). We're going to work on that.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Howdy Dave,

i'm was writing you at the same time that you are answering me.

Yes i have seen that i'm using in my Blogger template a javascript that resizes the image. You have this rule before (maybe 9 months ago or more) but dissapeared in some production deployment, i had used to not scale the images and let the browser to re-scale from that moment ;)

I think that it's not a bug in the "ruleset", it's a "better re-scaling detector", because my javascript it's resizing the images that doesn't fit good for responsive design. I think that maybe if it's a javascript doing the resize and not the browser it's a "little better" but it's not "perfect" for the best performance so i think that the rule it's ok.

In the Chrome extension the issue was detected like a re-scale problem... so i think that it's correct (but "very hard" rule ;)

Since the re-scale rule it's doing his job, i think that the scaler maybe is misunderstanding final values ​​that display in the tip message.

If you want to make another test, let me know and i'll try to help in anything you need.

Miguel.

[Miguel García Sánchez - Colomer]

Howdy Again Dave,

i have restored my score avoiding the javascript or browser "re-scale" ... it's hard because my Google's .jpg profile image it has "to die" to get this score ;)

Great job with this rule!!! but it's too hard ;)

Best regards,

[Marco Kunz]

Hello Dave,

our score at SmashingMagazine was at 90 for mobile, yesterday. Today we dropped to 80 because of the new rules for images.
Yet, we are serving all our images by best-practices for web development, ux in the back of our heads and all...

To replace all images with smaller ones for mobile and then again when upscaling the viewport is a no-go. We are not using any JS in order to do this but the good ol' "max-width: 100%; height: auto" in the CSS.
If we were to replace those upscaling images (being scaled down to match the viewport or content-area) everytime there is enough space would not improve performance but the opposite.

Imagine an article with 30 images and each of those would have to be replaced when resizing the viewport.

I really don't know if that is the way to go for now. It would start to make sense when <picture> was supported more widely by browsers.

Cheers,
Marco

[Dave Mankoff]

Howdy Marco.

Thanks for the feedback. I agree with your comments. We currently allow for a little fudge-factor in our images. They can be 50% larger in either dimension than their actual display size; e.g a 150px image can be fit into a 100px box.

It sounds like this isn't enough room, however. The first image on your site that we call out is a 500px wide image, but on a Nexus 5, it gets crammed down into a 319px box. The image, in other words, is 56% too large, beyond our threshold.

We are going to work on increasing this. We definitely agree that the picture element is the future.

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Dave,

before these ruleset test, the "auto" or "100%" it was "penalized" with the "prioritize visible content" rule because i think that maybe it considered an extra browser job to make the upsize and downsize. I think that this rule it was very hard for responsive design and i'm agree that it has been "deleted" in the last rollout, it was a good decission.

And with this "old" re-scale rule i think that with responsive design again, if the image it's correctly compressed and optimized (by optipng or jpegtran), it's good enough. I think that the "fudge-factor" could be more appropiate in 100% as "max value" or with some value that guarantees that the image will not be "deformed" with an incorrect aspect ratio or something... again, with responsive design in mind, i think that the "scaling-job" it's something that the browsers must optimize because if you have a lot images you aren't going to use one image "per each resolution" in distinct media-queries that would be too orthodox...

but this is only my opinion.

Best regards and thank you very much,

Miguel.

[Marco Kunz]

Hey Miguel,

that's exactly my point. =)

Replacing images for every time when you would need to upscale them (which would kill the quality) is more of a performance issue than downscaled images with optimized compression. This scenario is at worst if you think of fluid grids where a lot of images need to upscale with every pixel of space created by enlarging the viewport.

I think the only way to look at this in a positive way is to keep in mind that most people (apart from the nerdy web development enthusiast) will not resize their browser window but have one or two or at max three different devices and will never realize the fluid grid behind a responsive website. Therefore, if you were to optimize images for that use-case you would have to have a few versions of one image, each optimized for the viewport it should be displayed in.

Yet, I'd say let's not go there. The number of viewports, devices, aspect-ratios, hdpi-displays is increasing as we speak and so you never know how large your images will be displayed – in a fluid layout that is.

Cheers,
Marco.

P.S.: I hope I made sense with what I just wrote. =D

[Dave Mankoff]

Howdy Folks.

We just updated the release to fix the original issue.

Miguel - there's only one image that it's complaining about now. The Yoda image that you have on your site needs to be scaled down.

Marco - the score for Smashing Magazine is at 86 with the new release. This is as compared to an 87 in the previous release. Most of the gains will come from optimizing the images, rather than resizing them.

Assuming that this change seems reasonable, we'll be rolling out this change globally in a few days.

Hopefully the <picture> tag somes into play soon. I know that it's shipping in Chrome 38 and Firefox 33: http://caniuse.com/#feat=picture

-dave mankoff

man...@google.com

[Miguel García Sánchez - Colomer]

Ok, 

let me see and i'll change it. But i have "commented" the javascript that resize the image. i'll test it and tell you the results.

Best regards,

--
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-...@googlegroups.com.

To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/CACsObMO0i%2Bvp0Bk-ddVY9r42Pg-ChCZxdTN-Qy%3DjzEdkzPnhLA%40mail.gmail.com.

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

[Miguel García Sánchez - Colomer]

Hi,

reporting my latest tests:

• Without Javascript and all perfectly scaled i get 98 mobile, 99 desktop. I have resized to 80x80 (his "native" resolution) and optimized with optipng the Yoda profile image (optimizing the original Google Gadget changing the image for one that i have uloaded to my blog)  to get more score.
  

• With the "resizer-to-reposnive" Javascript i get 98 mobile (are the testing rules only for desktop?) and for desktop i get 75:
  

Optimizar estas imágenes para reducir su tamaño en 297,1 KB (reducción del 97%).

• Compressing and resizing http://1.bp.blogspot.com/…AAAAOow/g4eYynymddk/s1600/newPSrules.png could save 153,4 KB (98% reduction).
• Compressing and resizing http://1.bp.blogspot.com/…AAAAAOpA/PUcV2s1BrAE/s1600/pagespes2.png could save 81,5 KB (96% reduction).
• Compressing and resizing http://3.bp.blogspot.com/…AAAAAAAOd8/TJpLN-26YK4/s1600/portada.png could save 62,2 KB (96% reduction).

I think that the scaler have problems because my images, even before it was processed by the javascript, are totally optimized with optipng. I think that my Javascript "Responsive-resizer" don't resize the image too far from their original size (maybe with one image but not with those three and with those sizes).

So i think that the mobile module it's not detecting the new rules and the desktop need to be reviewed for the scaler results.

Dave, i'll comment again my javascript to get the best score, please but if you need to make your tests or something, let me know and i uncomment it if you need.If I can help in any way let me know and I make the changes you need.

Best regards,

Miguel.

El jueves, 24 de julio de 2014 20:24:48 UTC+2, Miguel García Sánchez - Colomer escribió:

Ok, 

let me see and i'll change it. But i have "commented" the javascript that resize the image. i'll test it and tell you the results.

Best regards,

2014-07-24 16:42 GMT+02:00 'Dave Mankoff' via pagespeed-insights-discuss <pagespeed-insights-discuss@googlegroups.com>:

Howdy Folks.

We just updated the release to fix the original issue.

Miguel - there's only one image that it's complaining about now. The Yoda image that you have on your site needs to be scaled down.

Marco - the score for Smashing Magazine is at 86 with the new release. This is as compared to an 87 in the previous release. Most of the gains will come from optimizing the images, rather than resizing them.

Assuming that this change seems reasonable, we'll be rolling out this change globally in a few days.

Hopefully the <picture> tag somes into play soon. I know that it's shipping in Chrome 38 and Firefox 33: http://caniuse.com/#feat=picture

-dave mankoff

man...@google.com

--
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.

[minmado...@nalnet.dk]

Hi Dave

How to fix this in wordpress

In short, we think this is coming from the fact that your images don't match the size that they are displayed at. In some cases, you display them at a smaller dimension, and in some cases you display them at a larger dimension.

 

On mobile, for instance, you take the image that you linked which is 260x265, and display it at 315x250

Can you provide a how to fix this?  Alternatively, provide a guide or some code to insert in child themes. Alternatively, tell which plugin to use? or a link.
Please note, that many are designers, not developers, so please inform in an easy how to do :)

Looking forward to your reply, so we can fix this issue

Thank you in advance
Best Regards

Oliver Nielsen

[Miguel García Sánchez - Colomer]

Hi Oliver,

i'm in Blogger and don't know how to do it in Wordpress but the thing i've done it's scale the image to their original sizes and i've used optipng to optimize each image.

If you need to know how to use optipng or something, ask for it and i'll try to explain it.

Best regards,

Miguel.

[minmado...@nalnet.dk]

Hi Miguel

Thanks for your response.
I have also scaled all my pictures down, with the program fastimage resize, and uploaded image to my folder.
All Images is circa 800 x 600 pixels. Some smaller than this. All Image do not have same dimensions.

But what is the problem and what should I do to display images correctly according to Google? 

[Miguel García Sánchez - Colomer]

Hi,

the "main thing" it's to avoid to up-scale or down-scale and optimize the image size.

The cause to avoid upscale:

So, if you have an image with 80x80 pixels and you "draw" it in your HTML, for example, at 150x150 pixels you are "forcing" the browser to calculate the up-scale from 80 to 150 making a delay for it. For all of this, it's better for the performance in page rendering, that you try to display your image with his native resolution (80x80) to avoid the up or down-scale size "by the browser".

The cause to optimize the image:

You can reduce the size of an image without loss quality using programs like optipng (for png) or jpegtran (for jpg). So reducing the image size you reduce the download time when the image it's not loaded in the cache. 

In summary, try to display your images in their "native" resolution or the more nearest to their native resolution as you can. And try to optimize the size of the image with optipng or jpegtran.

If you have any questions, feel free to ask that you need.

Miguel. 

[minmado...@nalnet.dk]

Hello again :)

Thanks for your time! I really appropriate your help

Let us take at look at this link.
http://minbageopskrift.dk/…wp-content/uploads/Daimkage-og-kaffe.jpg

I only upload photos into a gallery and with a maximum size of 800x600 pixels.
I use a light box to display images.
I optimize images even before upload, and I have an optimization program so that each image is optimized.
My theme makes the following sizes in my media library of this image.

120 x120
150x150
220x110
300x225
300x300
340x170
400x240
400x300
600x450
720x240
800x198
800x600
pixels

In page speed I get this:
Compressing and resizing http://minbageopskrift.dk/…wp-content/uploads/Daimkage-og-kaffe.jpg could save 83,7 KB (95 % reduction)

How can I optimize this image and achieving the reduction? 95%?

Does inserting more different sizes achieve the reduction?

Looking forward to your answer Miguel

[Miguel García Sánchez - Colomer]

Hi, i think that the scaler has an issue because from 800*600 to the higher and lower resolution that you report, i think that there aren't 97% of size to optimize.

I think that Dave and other pagespeed developers are trying to fix the problem.

For example in my web www.diariosdelanube.com i've got 98 in Mobile and desktop using the exact native resolution with each image. But it's not needed to do that because when they fix the scaling calculations, you could have 50% or more scaled size from the native image resolution.

Let's wait for the fix.

Best regards!!!

[minmado...@nalnet.dk]

Ok.
But, from now on, I only upload images which is exactly 800x600, which is the standard in the media settings.
My pagespeed score has dropped from 93 till 69 on some webpages, due the new standards.

Thanks Miguel.
Yes. Lets wait and see if it comes. But I have my thoughts about this.

Or else, we will have to install some responsive image plugin.

Best regards
Oliver

[Miguel García Sánchez - Colomer]

Yes i think that se have to wait for the fix... Meanwhile you can make a test using a pure 800x600 image adn you'll see that this image dosen't appear in the results.

Best regards.

[minmado...@nalnet.dk]

Even though I upload a image in 800 x600 pixels, I still get this information:   Compressing and resizing http://.....jpg - could save 123,6 KB (95 % reduction).

The original image is 139 Kb.

I am only displaying a thumbnail image on 150 x150 and use a lightbox to display the complete image on 800 x 600.

Very strange ?

[Miguel García Sánchez - Colomer]

No, it's because you are using a plugin or javascript to scale the image. You have to upload the image in his native resolution without any transformation (if the image is a png with 800x600 you have to show the image like png at 800x600).

Try it, you'll see ;)

--

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-...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pagespeed-insights-discuss/27125e5a-bf36-4a76-9b58-611e1e931734%40googlegroups.com.

[Dave Mankoff]

Hold on. There is some confusion here.

> "The cause to avoid upscale"

This is not quite true. We don't punish anyone for uploading a smaller image and stretching it larger. I would remark that this might look strange to users, but it won't meaningfully hurt speed. We did have a bug regarding this, but it should be fixed.

> "[...] I upload a image in 800 x600 pixels, [...] I am only displaying a thumbnail image on 150 x150".

This is the problem. We allow you to upload large images and shrink them down, but only within a certain limit (you can upload a 300x300 image and display it at 150x150). Anything more extreme then that we give a warning about. This threshold is also likely to change when the <picture> element becomes more reliable. I would recommend trying to upload images at the exact resolution that they are displayed at if it is possible.

If you are worried about the larger lightbox-ed image loading slowly, I would recommend using a preloader to load the larger image. There are numerous ways to do this. Some quick searching will turn up results: https://www.google.com/search?q=preload+images

-dave mankoff

man...@google.com\

[Miguel García Sánchez - Colomer]

Ok Dave, we'll wait for the fix. And ok, upscale or downscale within a limit. And is it ok if we use a javascript to calculate the size within those limits?

Thank you very much.

[minmado...@nalnet.dk]

Then I manage to get my page speed score back! Thank you - Miguel García Sánchez.

You were right.
 
@ Dave

Thanks. Ok, I got it. I will keep that in mind.
I do not know why Wordpress does not link to the thumbnail in uploads folder, but to the original image in the folder. If it did, there were no problems.

Now I have to go and edit approx. 1000 posts manually.

And may the Force be with you both  :D

[Miguel García Sánchez - Colomer]

Great, i'm happy to help you.

Best regards!!!

[Bobby]

Are you sure about shrinking images in half (e.g. 300 x 300 down to 150 x 150)? I can shrink a 300 x 300 image down to 250 x 250 or down to 50 x 50 and I get the same message about needing to optimize and resize either way.

The only way I can display a 300 x 300 and not get a "demerit" is to display it at 300 x 300 or larger. Any shrinkage, no matter how minor, is getting a "demerit" for me.

[Carlos Lizaga Anadon]

Working in a private server with decent configuration you should be able to enable User Agent directives to automatize images size. Also you can always lazy load all your image resources by using an initial CSS / SVG image and loading after those images in the correct resolution, compression and size.

Regards.  

[Dave Mankoff]

Howdy Bobby.

Do you have a sample page where you can show the issue? I'd be happy to investigate.

-dave mankoff

man...@google.com

[Bobby]

Dave,

Maybe I was seeing an error message about image optimization and thinking it was a an error message about size (I did re-smush all images on that site)...anyway, the "demerits" are gone.

Thanks for your offer just the same!

[Marco Kunz]

Heya Dave,

thanks for all the work you put into this! I really appreciate that. =)

One question popped up this morning though:

We have a jpg in our footer, which is 100x106px in dimensions. It is scaled down by its container to fit on mobile to 50x53px and of course this fires an issue on PSI.
Yet, I have taken the jpg, put it in grayscale via photoshop (it was b/w anyways) and compressed it, resulting in a 2kb jpg and still... PSI is reporting that I could reduce filesize by 1.8kb...
Do the math please =D 2kb filesize and I am told reduction could be 1.8kb...

While I see the issue of downscaled images and that one could serve a different one for different dimensions, I still feel there's something off with the Pagespeed Tool.
The only workaround I came up with is to size-up the container of the image and thereby make it appear bigger on mobile because only then the downscale-ratio is below the threshold of the tool.

Greetings,
Marco

[Dave Mankoff]

I'd have to see an example to be sure, but one thing to note is that oversized images grow surprisingly fast. If you put a 200x200 image into a 100x100 box, that means it contains 300% more pixels than it needs (200x200 = 40,000 pixels vs 100x100 = 10,000 pixels, so 30,000 extra).

If the sizes you give are correct, that is 100x106 = 10,600 pixels for a 50x53 = 2,650 pixel space. That is also 300% extra pixels. If the JPG size saled linearly, that implies that you'd be able to get the size down from 2kb to 0.5kb. But of course, JPG has other compression features so it sounds like it could be made even smaller.

In other words, a reduction down to 0.2KB does not sound unreasonable impossible. This is one of the reasons we introduced this new rule - big images introduced unexpected extra cost.

-dave mankoff

man...@google.com

[Marco Kunz]

I'd love that to be true, Dave.

Thing is: JPEG compression is lossy and we do not live in an ideal world.

Here's what I just did:

• I took the 100x106px jpeg (grayscale) with 2kb into Photoshop
• I resized the image to 50x53px
• I saved for web at 50% quality (thus the image still resembles something the user can decipher as a person)
• I ended up with an image at 1.2kb
• Then I went over it with jpegtran -> 1.2kb
• Then I put it in jpegmini -> 1.2kb
  

As that is far from what could have been expected I went back into Photoshop and set the quality of the output image to 10% with a result of 760byte but the fragments are that crude... well, you would not want to use that image for your website.

I think you can already see the dilemma, whereas I perfectly understand the concern about huge images being rammed in small containers. The huge but which has to come in here is: the number of pixels in a jpeg/png image doesn't say much about its filesize, the number of colors is playing a much more important role (especially with PNG graphics).

That's why you won't get that many bytes out of an image, which is already in grayscale (max. 255 colors) and downscaled to a certain point, by downscaling it even more or raising the compression bar to "noone will ever know what that is". You are perfectly right when it comes to images above 500px and more. If they are larger than needed the option is always to scale them down in order to save lots and lots of pixels and thereby shrink the filesize a little bit more.

Anyways, I feel we are moving towards a brighter future already. <picture> gets more and more cred around the W3C resulting in a near-future support in modern browsers and new image formats are conquering the web as we speak.

Again, thanks for the time invested to discuss the issue here with me. =) Very much appreciated.

[Miguel García Sánchez - Colomer]

I did this with jpeg with no problems in pagespeed:

- In Photoshop 100% quality.

- Use the Pagespeed Chrome Extension to get the optimized version of your jpg.

See if you loose some quaity or it's not noticiable... maybe it's good for you, i'm not sure but for testing could be interesting for you. 

Best regards

[Marco Kunz]

Thank you Miguel,

I will sure take a look. This sounds promising. =)

[Rick Steinwand]

Apparently delivering differently sized images via srcset, isn't supported yet. I have a test page with 400px, 800px and 1200px width images and I get a complaint for mobile that the 1200px image isn't optimized.

[Jesse Trippe]

Any update on this? It still doesn't seem to be working. The mobile PSI "emulator" is pulling a 700px image when it should be pulling a 320px image. I made a test for this:

http://madebyjesse.com/responsive-images/

[Rick Steinwand]

Last I heard, srcset and the picture element aren't yet supported.

https://groups.google.com/forum/#!topic/pagespeed-insights-discuss/-3w9jyBHNQY

[v...@rentecdirect.com]

It's over a year later and this apparently is still a problem. Google recommends use of the picture element for image selection at different browser widths, making it easy to keep synchronized with media query page alterations. However, Pagespeed Insights does not seem to understand which image should be loaded per the Picture tag. It is therefore insisting on image optimization for images that are not even loaded at the particular resolution (Desktop) it is testing.

We are being penalized because Pagespeed Insights does not follow Google's Best Practices recommendation.