webp image not supporting with mobile image of page builder

[sunilit42]

As pagebuilder generating image tag near by that create issue with page builder with mobile image

Mobile image is not converted into webp

Actual solution : it should be convert into webp image

[jissereitsma]

Could you add a bit more details? I've tried out the following myself: Open up a CMS page in PageBuilder, add an image to some row and make sure to select both a normal image and a mobile image. This is generating the following HTML structure in the content (seen in the Admin Panel once PageBuilder is disabled for instance):

<figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="GPP1FMQ"><img class="pagebuilder-mobile-hidden" title="" src="{{media url=desktop.png}}" alt="" data-element="desktop_image" data-pb-style="RRGILM2"><img class="pagebuilder-mobile-only" title="" src="{{media url=mobile.jpg}}" alt="" data-element="mobile_image" data-pb-style="FNYCUUG"></figure>

(Note that I've replaced the images with dummies here.)

Next, this HTML is parsed by the PageBuilder logic in the frontend and then picked up by the WebP module to display the following:

<figure data-content-type="image" data-appearance="full-width" data-element="main" data-pb-style="GPP1FMQ">
    <picture class="pagebuilder-mobile-hidden">
        <source type="image/webp" srcset="desktop.webp">
        <source type="image/png" srcset="desktop.png">
        <img class="pagebuilder-mobile-hidden" src="desktop.png" alt="" title="" data-element="desktop_image" data-pb-style="RRGILM2" loading="lazy">
    </picture>

    <picture class="pagebuilder-mobile-only">
        <source type="image/webp" srcset="mobile.webp">
        <source type="image/jpg" srcset="mobile.jpg">
        <img class="pagebuilder-mobile-only" src="mobile.jpg" alt="" title="" data-element="mobile_image" data-pb-style="FNYCUUG" loading="lazy">
    </picture>
</figure>

As I see it this is working perfectly from the point of view of WebP. Could you spend a little more time on describing the actual issue and the way to duplicate it?

[jissereitsma]

Possible duplicate of #107

[sunilit42]

@jissereitsma this issue fixed now as you replace redgex with html dom thing