v5-beta - picture/source/img tags construction for multiple image formats support?

[panakk]

Probably not an issue:

Hi. Great job. Just tested v5-beta and it looks it's already worth using it. I'm just wondering whether you considered to implement picture/source/img tags construction for multiple image formats support? I mean the image in the lightbox - would be great to offer both WEBP and JPEG support (or even more like AVIF). Thanks.

[evenreven]

I would love this too. In the meantime, I'm using the simple trick I read on Verlok's (the creator of vanilla-lazyload) blog, which is use jpeg for img fallback and webp for srcset.

In photoswipe markup that means jpeg in the a tag's href attribute and two or three webp sizes in the data-pswp-srcset attribute. After Safari finally started supporting webp, this is now a viable solution if you want responsive images without serving a dozen sizes and formats from cdn.

[mdisimino]

Good day folks.

Does the latest version of this software implement the picture/source/img construction which is needed to provide JPG fallback when WebP is not supported? Is there any other way this can be accomplished?

Using ... img src='...nonwebp' srcset='...webp' ... won't work.

[acwolff]

This is supported see this example album.

[luksak]

I have a working version that gets the srcset and types from <sources> of a <picture>. It works quite well form me. It is a bit hacky in a few places, but it supports quite generic markup. There you go:

https://stackblitz.com/edit/js-xczzaw