search

yireo / Yireo_Webp2

Magento 2 module to add WebP support to Magento 2
Open Software License 3.0
197 stars 57 forks source link

amp-img rewritten to use webp but the browsers don't actually load the webp version #110

Closed ioweb-gr closed 1 year ago

ioweb-gr commented 2 years ago

We have a case where we installed the module, and it seems to rewrite the images fine. On the browser's network tab I can see the webp extension on all image files. However when we switch to the AMP version of the website using Plumrocket_Amp module, even though the <amp-img> tags are rewritten to use webp, the browser is not actually using the webp version. So I'm thinking there must be something wrong with the implementation maybe?

Here's the example of how the html code is rewritten

Without yireo_webp2

<a href="https://example.com/tennis-shoes/asics-gel-game-8-gs-junior-tennis-shoes-1044a025-105.html?amp=1"
   class="product photo product-item-photo">

    <amp-img
            class="photo image i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
            layout="responsive"
            src="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.jpg"
            width="400" height="500" alt="Παιδικά παπούτσια Τένις Asics Gel Game 8 (GS)" i-amphtml-layout="responsive"
            style="--loader-delay-offset:125ms !important;">
        <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 125%;"></i-amphtml-sizer>
        <img decoding="async" alt="Παιδικά παπούτσια Τένις Asics Gel Game 8 (GS)"
             src="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.jpg"
             class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
</a>

With yireo_webp2

<picture class="photo image">
    <source type="image/webp"
            srcset="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.webp">
    <source type="image/jpg"
            srcset="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.jpg">
    <amp-img
            class="photo image i-amphtml-element i-amphtml-layout-responsive i-amphtml-layout-size-defined i-amphtml-built i-amphtml-layout"
            layout="responsive"
            src="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.jpg"
            width="400" height="500" alt="Παιδικά παπούτσια Τένις Asics Gel Game 8 (GS)" i-amphtml-layout="responsive"
            style="--loader-delay-offset:207ms !important;">
        <i-amphtml-sizer slot="i-amphtml-svc" style="padding-top: 125%;"></i-amphtml-sizer>
        <img decoding="async" alt="Παιδικά παπούτσια Τένις Asics Gel Game 8 (GS)"
             src="https://example.com/pub/media/catalog/product/cache/ef084a4a7a720952c72d3315c795d82c/1/0/1044a025_105_sr_rt_glb_1.jpg"
             class="i-amphtml-fill-content i-amphtml-replaced-content"></amp-img>
</picture>

image

Any ideas why the browser wouldn't render the webp version here?

jissereitsma commented 2 years ago

I'm not sure how this should be rewritten, but it seems logical to conclude that this is not working. Either override the PHTML template of this WebP extension to fix things following the AMP standards, or override the PHTML template of the AMP extension (if any), or skip WebP for AMP all together. The HTML that you are showing is definitely not going to work, but unfortunately I lack the personal interest for AMP to volunteer for a solution here.

jissereitsma commented 1 year ago

I'm closing this ticket due to inactivity. Feel free to reopen if needed.