Add webp <source> to existing <picture> tag

[marcoveeneman]

Hi,

Thanks to this module existing <img> tags are converted to <picture><source><img><picture structure, which works really well! But I have a question: Is this module capable of adding webp source block of images to existing <picture> tags? See example below:

<a href="http://test.local/category/" class="image__link">
  <figure class="image__figure">
    <picture class="image__picture" style="aspect-ratio: 500/79">
      <source 
        srcset="
          http://test.local/media/homepage/category-banners/category-image.png 2000w,
          http://test.local/media/homepage/category-banners/.thumbs/480/category-image.png 480w,
          http://test.local/media/homepage/category-banners/.thumbs/768/category-image.png 768w,
          http://test.local/media/homepage/category-banners/.thumbs/1024/category-image.png 1024w,
          http://test.local/media/homepage/category-banners/.thumbs/1440/category-image.png 1440w,
          http://test.local/media/homepage/category-banners/.thumbs/1920/category-image.png 1920w"
        type="image/png"
        width="2000"
        height="316">
      <img
        class="image__image"
        alt="alt"
        src="http://test.local/media/homepage/category-banners/category-image.png"
        srcset="
          http://test.local/media/homepage/category-banners/category-image.png 2000w,
          http://test.local/media/homepage/category-banners/.thumbs/480/category-image.png 480w,
          http://test.local/media/homepage/category-banners/.thumbs/768/category-image.png 768w,
          http://test.local/media/homepage/category-banners/.thumbs/1024/category-image.png 1024w,
          http://test.local/media/homepage/category-banners/.thumbs/1440/category-image.png 1440w,
          http://test.local/media/homepage/category-banners/.thumbs/1920/category-image.png 1920w"
        width="2000"
        height="316"
        fetchpriority="high"
        loading="eager">
    </picture>
  </figure>
</a>

It would be really nice if the following could be generated:

<a href="http://test.local/category/" class="image__link">
  <figure class="image__figure">
    <picture class="image__picture" style="aspect-ratio: 500/79">
      <source 
        srcset="
          http://test.local/media/homepage/category-banners/category-image.webp 2000w,
          http://test.local/media/homepage/category-banners/.thumbs/480/category-image.webp 480w,
          http://test.local/media/homepage/category-banners/.thumbs/768/category-image.webp 768w,
          http://test.local/media/homepage/category-banners/.thumbs/1024/category-image.webp 1024w,
          http://test.local/media/homepage/category-banners/.thumbs/1440/category-image.webp 1440w,
          http://test.local/media/homepage/category-banners/.thumbs/1920/category-image.webp 1920w"
        type="image/webp"
        width="2000"
        height="316">
      <source 
        srcset="
          http://test.local/media/homepage/category-banners/category-image.png 2000w,
          http://test.local/media/homepage/category-banners/.thumbs/480/category-image.png 480w,
          http://test.local/media/homepage/category-banners/.thumbs/768/category-image.png 768w,
          http://test.local/media/homepage/category-banners/.thumbs/1024/category-image.png 1024w,
          http://test.local/media/homepage/category-banners/.thumbs/1440/category-image.png 1440w,
          http://test.local/media/homepage/category-banners/.thumbs/1920/category-image.png 1920w"
        type="image/png"
        width="2000"
        height="316">
      <img
        class="image__image"
        alt="alt"
        src="http://test.local/media/homepage/category-banners/category-image.png"
        srcset="
          http://test.local/media/homepage/category-banners/category-image.png 2000w,
          http://test.local/media/homepage/category-banners/.thumbs/480/category-image.png 480w,
          http://test.local/media/homepage/category-banners/.thumbs/768/category-image.png 768w,
          http://test.local/media/homepage/category-banners/.thumbs/1024/category-image.png 1024w,
          http://test.local/media/homepage/category-banners/.thumbs/1440/category-image.png 1440w,
          http://test.local/media/homepage/category-banners/.thumbs/1920/category-image.png 1920w"
        width="2000"
        height="316"
        fetchpriority="high"
        loading="eager">
    </picture>
  </figure>
</a>

If it is not supported yet, what would be needed to make it work?

Kind Regards,
Marco

[jissereitsma]

Sorry for the long delay here. This is not supported. Theoretically, it could be supported. However, this would require a huge change to scan the body for existing picture-sets, scan for all variant sources and then convert all of those images for each of the supported next gen images. For instance, if both WebP and AVIF would be present, the single picture you were posting would need to support 18 x 3 = 54. It's far too dangerous to add, I would say.

Instead, let's study the mechanism that is generating these existing pictures anyway: Would it not be making more sense to add support WebP right in there, instead of adding 2 picture generators on top of each other?

[jissereitsma]

I'm closing this due to inactivity. Let me know if this is not yet fixed already.

[tweetyx]

hi jissereitsma,
can you add on next version, a helper for picture with that fonctionality "he converted to webp on output" like

<picture>
  <source media="(max-width:767px)" width="412" height="235" srcset="<?= $block->escapeHtml($yireoHelper->webpGoOn($featuredImageMobile)) ?>">
  <source media="(min-width:768px)" width="193" height="129" srcset="<?= $block->escapeHtml($yireoHelper->webpGoOn($featuredImage) ?>">
  <img src="<?= $block->escapeHtml($imageHelper->webpGoOn($featuredImage) ?>" width="193" height="129" alt="article en avant sur les lampes" class="animation-type-zoom bg-img mfblogunveil">
</picture>

so we can use picture,
else the actual tips is :

<img src="<?= $desktopImgUrl ?>" alt="" class="w-full hidden md:block" width="1200" height="320" > 
<img src="<?= $smallImgUrl ?>" alt="" class="w-full md:hidden" width="640" height="200" >

[jissereitsma]

This is a very complex feature, likely to break in many situations. I'm not sure if I will be up for the job shortly.

[tweetyx]

ok thanks for your answer, i will try to create it .
Just for undestand where is the function who create the webp in your module
if want to put this url in param
/media/blog/cache/193x_0/wysiwyg/BLOG/Template_visuel_articledeblog_lanterne.jpg
and he creates :
/media/blog/cache/193x_0/wysiwyg/BLOG/Template_visuel_articledeblog_lanterne.webp

thanks for your time

[jissereitsma]

It is not a simple single function, it is a bit more complex than that :) Here is a file to get started: https://github.com/yireo/Yireo_NextGenImages/blob/master/Util/HtmlReplacer.php

[tweetyx]

ok it's good, i find it, in hard code it's :

$objectManager = \Magento\Framework\App\ObjectManager::getInstance();
$image = $objectManager->get(\Yireo\NextGenImages\Image\ImageFactory::class)->createFromUrl('https://www.mysite.fr/media/wysiwyg/blog/blog-1.jpg');
$convertor = $objectManager->get(\Yireo\Webp2\Convertor\Convertor::class);
$urlwebpimagecreate = $convertor->convertImage($image);

so i can create an helper in my module and do this picture source marcoveeneman

[jissereitsma]

Thanks. Probably you know that using the ObjectManager directly in PHTML templates is a bad idea. Maybe in the future I can create a nice ViewModel for this.

[tweetyx]

Ok, i create the module finaly
https://github.com/tweetyx/Pagespeedfr_Lcpimage/, don't known if i can create viewmodel (hyva not require), need to pass by objectmanager since your module is not require in my module :p

[hostep]

Isn't this feature being added by these 2 open PR's?

• add support for converting pictures with src-sets #85
• add support for converting src-sets Yireo_Webp2#174