Support for multiple image formats (webp, avif)

[vedmant]

I integrated next gen images format and this packages has no way to use multiple formats for the image (using tag). Would be nice to have this support.

Update:

Actually I see that there is support for picture tag, however it doesn't work properly for my case, here is example of using the component:

    <cool-light-box
      v-if="!['sm', 'md'].includes(screenSize)"
      :items="venue.photos.map(p => ({
        src: p.photo_rectangular,
        picture: {
          sources: [
            {srcset: p.photo_rectangular_webp, type: 'image/webp'},
            {srcset: p.photo_rectangular, type: 'image/jpeg'},
          ],
        },
      }))"
      :index="index"
      @close="index = null"
    />

It generates correct picture tag, however it still loading all the jpeg images, I think there is some issue with lazy loading and how browser responds when srcset and src are replaces. My suggestion is just to add loading="lazy" to img tag instead of using own custom lazy loading solution, as it may not work properly with tag.

This is images initially loaded on page: https://monosnap.com/file/DPoVXb0LLONsX0C0KRvWMsUFo7dWOs all webp. This is when I open lightbox: https://monosnap.com/file/yl7UpnNxLPKRe5Faou8HwRrkFHvatA it loads all jpegs instead. This is rendered picture tag in the lightbox which is correct: https://monosnap.com/file/XxHlHOvEjLQbpncY2NetKGueuseF6z But still it loads jpegs.