Usage with `<picture>` tag loads images twice

[Tobias Möritz]

Reproduction

https://github.com/tobimori/kirby-baukasten/blob/main/site/snippets/picture.php

Describe the bug

When using unlazy with the <picture> tag, multiple source elements that each have data-srcset and an img element with the necessary data-src attribute, the image specified in data-src is downloaded before data-srcset which results in a duplicated download of those images.

Some sites where I noticed this:

• https://sew-morlaix.com/
• https://www.antonsten.com/about

Additional context

No response

Logs

No response

[Johann Schopplich]

Should be fixed in f055a46. Can you try v0.10.5, please?

[Tobias Möritz]

Hmm, it seems like both images still get downloaded, just the other way around?

[Tobias Möritz]

This is the untransformed code:

<picture class="block bg-sand md:rounded-none rounded overflow-hidden" style="--ratio: 1.4652014652015;">
    <source data-sizes="auto" data-srcset="http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-800x.avif 800w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-1400x.avif 1400w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2000x.avif 2000w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2600x.avif 2600w" type="image/avif">
    <source data-sizes="auto" data-srcset="http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-800x.webp 800w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-1400x.webp 1400w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2000x.webp 2000w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2600x.webp 2600w" type="image/webp">
    <source data-sizes="auto" data-srcset="http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-800x.png 800w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-1400x.png 1400w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2000x.png 2000w, http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-2600x.png 2600w" type="image/png">
    <img alt="" class="w-full h-full object-cover" data-sizes="auto" data-src="http://127.0.0.1:3000/media/pages/about/4433226039-1708113599/anton-1700x.png" data-thumbhash="mQiKC4QPf2uoW5jasDQJiAICiIiGhmg" height="1092" loading="lazy" style="aspect-ratio:1.4652014652015;object-position:50% 50%;" width="1600">
</picture>

[Johann Schopplich]

OK, tricky. I guess we have to ignore the loading of the <img> altogether, if a <source> is present. But I'm not 100 % sure.

[Tobias Möritz]

What's interesting is, that in the Network tab, chrome specifies the origin of the request now like this:

.png ->

.avif -> my lazyLoad() call

[Johann Schopplich]

Thanks, I've got an idea.

[Johann Schopplich]

This issue should be resolved in 2f87c35. Please try v0.11.0. Thanks!

[Tobias Möritz]

Seems to be fixed, thanks!