Add webp <source> to existing <picture> tag

marcoveeneman commented 1 year ago

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 commented 7 months ago

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 commented 1 month ago

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

yireo / Yireo_NextGenImages

Add webp <source> to existing <picture> tag #66