Some PNG file not being optimized

[Frederic Trudeau]

Hello group,

Please see those two images :

Original : http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/communau...@2x.png

Optimized : http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/xcommunauto-color,402x.png.pagespeed.ic.ianyfYMdzR.png

There are exactly the same size, even if Pagespeed supposedly optimized the ressource.

PageSpeed Insights tells me compressing and resizing this image could save 124.4KiB (74% reduction)

Am I missing something ?

Is it possible to run ngx_pagespeed in debug mode to see what's up with this image ? ( and others as well )

Thanks ; )

FT

[Jeffrey Crowell]

Hi Frederic,

When adding /?PageSpeedFilters=+debug, you can see ngx_pagespeed's debug output.

In this case we see something like

<img src="/wp-content/uploads/2016/03/xcommunauto-color,402x.png.pagespeed.ic.WH8zDKAYw2.webp"/><!--Cache-control: no-transform, preventing rewriting of http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/xcommunauto-color,402x.png.pagespeed.ic.WH8zDKAYw2.webp--><!--Image does not appear to need resizing.--><!--Image has transparent pixels, is sensitive to compression noise, and has no animation.--><!--The image was not inlined because it has too many bytes.-->

But checking the original resources:

curl http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/communau...@2x.png -I

HTTP/1.1 200 OK

Content-Type: image/png

Content-Length: 171024

Connection: keep-alive

Server: nginx

Accept-Ranges: bytes

ETag: W/"PSA-aj-ianyfYMdzR"

Date: Fri, 20 May 2016 15:20:08 GMT

Expires: Sat, 18 Jun 2016 22:23:05 GMT

Cache-Control: max-age=2530976

The image did not have the Cache-Control: no-transform, that was added by the pagespeed module on the rewritten resource.

curl http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/xcommunauto-color,402x.png.pagespeed.ic.ianyfYMdzR.png -I HTTP/1.1 200 OK Content-Type: image/png Content-Length: 171024 Connection: keep-alive Link: <http://prospek-stage-20160519.ftrudeau.me/wp-content/uploads/2016/03/communau...@2x.png>; rel="canonical" Server: nginx Accept-Ranges: bytes Date: Thu, 19 May 2016 22:31:19 GMT Expires: Fri, 19 May 2017 22:31:19 GMT Cache-Control: max-age=31536000,no-transform ETag: W/"0" Last-Modified: Thu, 19 May 2016 22:31:19 GMT X-Page-Speed: 1.11.33.2-0

It's possible that Pagespeed Insights can tell that the rendered dimensions of the image are different from the image size. 

http://imgur.com/gIyUi3h (rendered dimensions are different from image dimensions)

 Can you try enabling this filter to see if it makes a difference?

https://developers.google.com/speed/pagespeed/module/reference-image-optimize#resize_rendered_image_dimensions

Thanks!

Jeff

--
You received this message because you are subscribed to the Google Groups "ngx-pagespeed-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to ngx-pagespeed-di...@googlegroups.com.
Visit this group at https://groups.google.com/group/ngx-pagespeed-discuss.
For more options, visit https://groups.google.com/d/optout.

[Frederic Trudeau]

Thanks for the quick reply.

I see what the problem is, which is not an actual problem.

The source image is sized so that it is displayed in highres ( retina display, hence the @2x suffix )

My guess is that using the resize_rendered_image_dimensions filter would break retina display, so this is not an option.

FT

[Jeffrey Crowell]

In this case, you can use srcset to serve images at different dimensions based on the user's resolution.

https://developers.google.com/speed/pagespeed/module/filter-image-responsive