Webp conversion not happening for data-srcset URL of <picture> element.

[NileshBhosale1993]

Following are the details of my setup and more details about my problem that I am facing.

System info:
nginx-1.18
php7.3
ubuntu 20.04(64-bit)

We have used the following page speed config:
pagespeed on;
# Needs to exist and be writable by nginx. Use tmpfs for best performance.
pagespeed FileCachePath /var/ngx_pagespeed_cache;

    pagespeed RedisServer "127.0.0.1:6379";
    pagespeed RedisDatabaseIndex 3;


    pagespeed EnableFilters inline_images,sprite_images;
    pagespeed EnableFilters recompress_images;
    pagespeed EnableFilters convert_png_to_jpeg;
    pagespeed EnableFilters convert_jpeg_to_webp;
    pagespeed EnableFilters strip_image_color_profile;

    location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" {
        add_header "" "";
    }
    location ~ "^/pagespeed_static/" { }
    location ~ "^/ngx_pagespeed_beacon$" { }

We have used the picture element for setting the different size images based on screen size. It only does the conversion for img tag src URL. Webp conversion not happening for srcset URL of element.

	<picture>
        <source media="(max-width: 360px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/3bcb0a6e08590604b54b12a761d0d160/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/3bcb0a6e08590604b54b12a761d0d160/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 420px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/a3d4219d5a995f821f474bb151af7bc9/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/a3d4219d5a995f821f474bb151af7bc9/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 480px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/5d1a0f4f639586f2a4e5aba5ccf56d10/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/5d1a0f4f639586f2a4e5aba5ccf56d10/a/g/aglaonemapinkbeauty_45_1.png"> 
        <source media="(max-width: 630px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/de5a1463ba3f5a599da9bf4103f0c2f6/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/de5a1463ba3f5a599da9bf4103f0c2f6/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 765px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/86c757893017d52d78bc8fcee90863c3/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/86c757893017d52d78bc8fcee90863c3/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 900px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/67150557dcf8de3036f902b0a5817f90/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/67150557dcf8de3036f902b0a5817f90/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 1024px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/b45688523f1fc6a85e3edff51b086a23/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/b45688523f1fc6a85e3edff51b086a23/a/g/aglaonemapinkbeauty_45_1.png">
        <source media="(max-width: 1400px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/7fc5ce79f785a179cb820ac95672874b/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/7fc5ce79f785a179cb820ac95672874b/a/g/aglaonemapinkbeauty_45_1.png">
        <img class="product-image-photo lazyloaded" src="https://stagingmedia.ugaoo.com/catalog/product/cache/bf904fa088be7169b4178c352b6a4f7a/a/g/xaglaonemapinkbeauty_45_1.png.pagespeed.ic.EzzjczwMwq.webp" data-src="https://stagingmedia.ugaoo.com/catalog/product/cache/bf904fa088be7169b4178c352b6a4f7a/a/g/xaglaonemapinkbeauty_45_1.png.pagespeed.ic.EzzjczwMwq.webp" max-width="609" max-height="812" alt="Aglaonema Pink Beauty Plant" title="Aglaonema Pink Beauty Plant" data-pagespeed-url-hash="1469013157" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">   
    </picture>

Is there any configuration available to make it work?

[jmarantz]

I don't remember why <source srcset=...> is not handled by default, but you can enable its use with a directive as described in https://www.modpagespeed.com/doc/domains#url-valued-attributes.

…

On Wed, Dec 23, 2020 at 6:27 AM NileshBhosale1993 ***@***.***> wrote: Following are the details of my setup and more details about my problem that I am facing. System info: nginx-1.18 php7.3 ubuntu 20.04(64-bit) We have used the following page speed config: pagespeed on; # Needs to exist and be writable by nginx. Use tmpfs for best performance. pagespeed FileCachePath /var/ngx_pagespeed_cache; pagespeed RedisServer "127.0.0.1:6379"; pagespeed RedisDatabaseIndex 3; pagespeed EnableFilters inline_images,sprite_images; pagespeed EnableFilters recompress_images; pagespeed EnableFilters convert_png_to_jpeg; pagespeed EnableFilters convert_jpeg_to_webp; pagespeed EnableFilters strip_image_color_profile; location ~ "\.pagespeed\.([a-z]\.)?[a-z]{2}\.[^.]{10}\.[^.]+" { add_header "" ""; } location ~ "^/pagespeed_static/" { } location ~ "^/ngx_pagespeed_beacon$" { } We have used the picture element for setting the different size images based on screen size. It only does the conversion for img tag src URL. Webp conversion not happening for srcset URL of element. <picture> <source media="(max-width: 360px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/3bcb0a6e08590604b54b12a761d0d160/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/3bcb0a6e08590604b54b12a761d0d160/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 420px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/a3d4219d5a995f821f474bb151af7bc9/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/a3d4219d5a995f821f474bb151af7bc9/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 480px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/5d1a0f4f639586f2a4e5aba5ccf56d10/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/5d1a0f4f639586f2a4e5aba5ccf56d10/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 630px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/de5a1463ba3f5a599da9bf4103f0c2f6/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/de5a1463ba3f5a599da9bf4103f0c2f6/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 765px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/86c757893017d52d78bc8fcee90863c3/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/86c757893017d52d78bc8fcee90863c3/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 900px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/67150557dcf8de3036f902b0a5817f90/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/67150557dcf8de3036f902b0a5817f90/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 1024px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/b45688523f1fc6a85e3edff51b086a23/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/b45688523f1fc6a85e3edff51b086a23/a/g/aglaonemapinkbeauty_45_1.png"> <source media="(max-width: 1400px)" data-srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/7fc5ce79f785a179cb820ac95672874b/a/g/aglaonemapinkbeauty_45_1.png" srcset="https://stagingmedia.ugaoo.com/catalog/product/cache/7fc5ce79f785a179cb820ac95672874b/a/g/aglaonemapinkbeauty_45_1.png"> <img class="product-image-photo lazyloaded" src="https://stagingmedia.ugaoo.com/catalog/product/cache/bf904fa088be7169b4178c352b6a4f7a/a/g/xaglaonemapinkbeauty_45_1.png.pagespeed.ic.EzzjczwMwq.webp" data-src="https://stagingmedia.ugaoo.com/catalog/product/cache/bf904fa088be7169b4178c352b6a4f7a/a/g/xaglaonemapinkbeauty_45_1.png.pagespeed.ic.EzzjczwMwq.webp" max-width="609" max-height="812" alt="Aglaonema Pink Beauty Plant" title="Aglaonema Pink Beauty Plant" data-pagespeed-url-hash="1469013157" onload="pagespeed.CriticalImages.checkImageForCriticality(this);"> </picture> Is there any configuration available to make it work? — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#1725>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAO2IPOMYWEPIP5M7A5AAITSWHH3ZANCNFSM4VG353UQ> .

[NileshBhosale1993]

@jmarantz,
Thanks.

[Lofesa]

@NileshBhosale1993
Take care about UrlValuedAttribute source srcset image;. In picture elements, normally, only have 1 image url in srcset or data-srcset, but it there is more than 1 url image, these directive don´t work.
These issue is addressed in the PR #1929 but still not merged.

[NileshBhosale1993]

In my case, it's only one URL inside scrset.

I have faced another issue now which is related to cache. We have faced sometimes 404 errors for webp images with the below config
We have configured an internet-facing Application load balancer in front of the Nginx server. We have added 2 instances behind the load balancer with a common Redis cache server for page speed.

pagespeed on;
# Needs to exist and be writable by nginx.  Use tmpfs for best performance.
pagespeed FileCachePath /var/ngx_pagespeed_cache;

pagespeed RedisServer "172.31.37.141:6379";
pagespeed RedisDatabaseIndex 3;

pagespeed Disallow */Magento/backend/*;
pagespeed UrlValuedAttribute source srcset image;
pagespeed UrlValuedAttribute source data-srcset image;

pagespeed EnableFilters inline_images,sprite_images;
pagespeed EnableFilters recompress_images;
pagespeed EnableFilters convert_png_to_jpeg;
pagespeed EnableFilters convert_jpeg_to_webp;
pagespeed EnableFilters strip_image_color_profile;

I have to go through issue #1686 but not able to connect all points.

[Lofesa]

Hi
Have you tried https://mydomain.com/?PageSpeedFilters=+debug ?
this arg add debug messages to the html code.
You use the same RedisDatabaseIndex in both servers?
Use LoadFromFile or resources are fechted by a http request?

[NileshBhosale1993]

Hi
Have you tried https://mydomain.com/?PageSpeedFilters=+debug ? NO
You use the same RedisDatabaseIndex in both servers? YES
Use LoadFromFile or resources are fechted by a http request? We have fetched all resources by https

[Lofesa]

Hi
Have you tried https://mydomain.com/?PageSpeedFilters=+debug ? NO

Try it

Use LoadFromFile or resources are fechted by a http request? We have fetched all resources by https

Have you configured fecht by https in both servers?

pagespeed FetchHttps enable; See others parameters here

And also need to set:

pagespeed SslCertDirectory directory;
pagespeed SslCertFile file;

If distro is Ubuntu/Devian like, only directory, if Redhat/Centos like, both lines.
More info here