Lightbox with AVIF or WEBP instead of original image using the picture element

The CMS Questions
1

I am using the new possibility of Kirby to dynamically server optimized images in webp or avif format additionally to the original format.
This works well but not for the lightbox I am using as it is showing all three formats in a sliding gallery view instead of just the most optimized.
This is the current code I am using for it:

<a href="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5.png" data-lightbox="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5.png" class="nomark spotlight">
        ​    <picture>
            <source srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q48.avif 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q48.avif 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q48.avif 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q48.avif 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/avif">
            <source srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q55.webp 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q55.webp 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q55.webp 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q55.webp 2048w" sizes="(max-width: 767px) calc(0.8 * 100vw), calc(0.61 * 100vw)" type="image/webp">
            <img src="" alt="" class="!my-1 max-h-[50vh] mx-auto md:px-2" srcset="https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-512x-q50.png 512w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1024x-q50.png 1024w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-1536x-q50.png 1536w, https://dev.domain.tld/media/pages/blog/dorfromantik-im-test-meditatives-puzzlespiel/3aa8c1e924-1636061936/2021-03-24-5-2048x-q50.png 2048w" decoding="async" loading="lazy">
            </picture>
        </a>

For the lightbox I am using spotlight which can slide through multiple images, which I use for the gallery block. How could I make sure that only the most optimized version is being used for the lightbox instead of all formats?

2

Ah, I just saw you already asked this question in the spotlight repo issues. Since it’s not Kirby related at all, that’s the right place!