incubator-pagespeed-ngx icon indicating copy to clipboard operation
incubator-pagespeed-ngx copied to clipboard

IPRO PNG to webP lossy

Open imartinez-tws opened this issue 5 years ago • 12 comments
trafficstars

Hi,

I have been reviewing the documentation and experimenting with the NGINX module and it seems the only way to convert to PNG to webP is the lossless way as the lossy one seems to be reserved to recompress_webp which seems to require a webP image as input.

I am wondering if there is a way to achieve IPRO lossy webP compression for PNG images or is something that could be considered for future releases.

Thanks in advance.

imartinez-tws avatar Oct 07 '20 13:10 imartinez-tws

Hi I don´t think IPRO makes any image conversion, it recopress the image but don´t change the image type because IPRO don´t change the url. If you enable convert_png_to_jpeg and convert_jpeg_to_webp then the png image get converted to lossily-encoded WebP

Lofesa avatar Oct 08 '20 06:10 Lofesa

Hi I don´t think IPRO makes any image conversion, it recopress the image but don´t change the image type because IPRO don´t change the url. If you enable convert_png_to_jpeg and convert_jpeg_to_webp then the png image get converted to lossily-encoded WebP

That's not entirely true; it might be a little confusing, but the module may transform formats even though the extension mentioned in the url does not change. It will change the content-type when it does this though.

oschaaf avatar Oct 08 '20 06:10 oschaaf

Thanks for the responses.

Yes I am aware of how IPRO works based on the accept header, the content type and the vary header and I am quite happy with the default behaviour.

According to documentation, convert_png_to_jpeg is only applicable "if they have no transparent pixels and if PageSpeed determines that they are not sensitive to compression noise". That drastically reduces the number of images that can be converted and AFAIK, it's possible to convert images with transparency to webP lossy.

I wonder if there is a way to bypass this restriction and give control to the user about the quality adjustment.

imartinez-tws avatar Oct 08 '20 07:10 imartinez-tws

But in Convert JPEG to WebP it says "...With this filter enabled, GIF and PNG images can also be converted to lossily-encoded WebP if the configuration allows them to be converted to JPEG " I think the doc you cited is for convert png to jpg only, and jpg don´t allow transparency. And for recopreson quality you have some filters: https://www.modpagespeed.com/doc/reference-image-optimize#WebpAnimatedRecompressionQuality https://www.modpagespeed.com/doc/reference-image-optimize#WebpQualityForSaveData https://www.modpagespeed.com/doc/reference-image-optimize#WebpRecompressionQuality https://www.modpagespeed.com/doc/reference-image-optimize#WebpRecompressionQualityForSmallScreens

Lofesa avatar Oct 08 '20 10:10 Lofesa

The links you are mentioning are not filters but options for filtering. The only filter that converts PNG to webP is this one https://www.modpagespeed.com/doc/reference-image-optimize#convert_to_webp_lossless

And based on my tests, the options for webP quality only apply for this filter which clearly says the input is a webP image but not a PNG one: https://www.modpagespeed.com/doc/reference-image-optimize#recompress_webp

I wonder if there is a way to have a filter (or combination of them) which takes the PNG with transparency and converts to webP based on WebpRecompressionQuality option, something like convert_to_webp_lossy

imartinez-tws avatar Oct 08 '20 11:10 imartinez-tws

Have you tried this?: pagespeed EnableFilters convert_png_to_jpeg; pagespeed EnableFilters convert_jpeg_to_webp;

take a look at this image:

Captura

Is a transparent png converted to transparent webp.

Lofesa avatar Oct 08 '20 11:10 Lofesa

I have tried with this configuration

`

Pagespeed configuration

pagespeed on;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters recompress_webp;
pagespeed WebpRecompressionQuality 40;

`

An this configuration

`

Pagespeed configuration

pagespeed on;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed WebpRecompressionQuality 40;

`

First request returns PNG with s-maxage=10 as expected, after some time, the content is still the PNG original image. As it is a direct request is/should be using IPRO.

I have used this image as a test https://www.gstatic.com/webp/gallery3/1.png

imartinez-tws avatar Oct 08 '20 13:10 imartinez-tws

Whit "...As it is a direct request is/should be using IPRO" you will say that you requested the image directly? Some like: https://mydomain.com/1.png ? If yes, that not work. Pagespeed optimizes resources in html code and only in the html code. If you request a resource directly, pagespeed does nothing So for testing, create an html page with the image. And try the debug parameter: https://mydomain.com/page-with-image.html/?PageSpeedFilters=+debug Then look at the html code, pagespeed must inject debug code as html comments. And the image file url must we in your domain. Resources in others domains can´t be optimized unless you auth it expresly, but the other domain must have pagespeed too. Other aspect to take account is the file ttl. The image must have a cacheable cache-control header. If you set the cache-control header too shortly then the optimized image in the pagespeed cache expires and must restart the whole optimization process. I wil say, if you use a cache-control: max-age=300 , the optimized image rest in the pagespeed cache for 300s and every 300s the whole optimization process must restart.

P.S. Perdona mi ingles patatero =:-)

Lofesa avatar Oct 08 '20 15:10 Lofesa

When you say "Pagespeed optimizes resources in html code and only in the html code" this is not exactly true. Currently pagespeed supports HTML resource rewrite mode which is the one you are mentioning but it also supports IPRO (In place Resource Optimization) which is currently supported and in fact it is converting to webp if I enable convert_to_webp_lossless filter.

Have you checked if the same test I did is performed within an HTML, webp lossy conversion is working? If so, it would be only a matter of making available for IPRO.

Thanks again y no te preocupes, entiendo perfectamente tu ingles :)

imartinez-tws avatar Oct 08 '20 15:10 imartinez-tws

Yes, you are rigth. The url is not changed but content-type is image/webp. But image still transparent with or w/o pagespeed rewrite. I have tried a direct url request disabling convert_to_webp_lossless as a url parameter and still have content-type image/webp, but I think the image is the same, as far as the Etag header is the same, have the same size....

You con enale/disable filters with url parameters:

https://mydomain.com/?PageSpeed=on/off to enable/disable pagespeed https://mydomain.com/mi-image.png?PageSpeedFilters=-convert_to_webp_lossless to disable this filter.

Lofesa avatar Oct 08 '20 16:10 Lofesa

I had no luck on making this work. Given this https://www.gstatic.com/webp/gallery3/1.png image as input, I tried to convert to lossy webp using IPRO but all combinations I tried return the original PNG as content without any optimization. The only filter that is converting the content to webP is the lossless one.

It would be great if someone knows a way to do the conversion or a new filter can be created which based on what I understood, would be something like combining convert_to_webp_lossless with recompress_webp so they output of the former would be the input of the later

imartinez-tws avatar Oct 13 '20 16:10 imartinez-tws

Kind of late to the party here, but on a hunch I think that to fix this a tweak in ImageImpl::ComputeOutputContents would be needed.

oschaaf avatar Mar 28 '21 22:03 oschaaf