How to best use responsive WebP images with picture elements ? What about GID and PID ?

[robots4life]

I have following existing markup.

<picture>
	<source
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.webp 200w,
				opera-400.webp 400w,
				opera-800.webp 800w,
				opera-1200.webp 1200w,
				opera-1600.webp 1600w,
				opera-2000.webp 2000w"
		type="image/webp"
	/>
	<img
		src="opera-400.jpg"
		alt="The Oslo Opera House"
		sizes="(min-width: 640px) 60vw, 100vw"
		srcset="opera-200.jpg 200w,
				opera-400.jpg 400w,
				opera-800.jpg 800w,
				opera-1200.jpg 1200w,
				opera-1600.jpg 1600w,
				opera-2000.jpg 2000w"
	/>
</picture>

Do I understand correct, to be able to feed PhotoSwipe responsive WebP sources and to be able to use the img element as children I need to do a combination of this information ?

1. https://photoswipe.com/custom-content/#using-webp-image-format
2. https://photoswipe.com/getting-started/#responsive-images-with-srcset
3. https://photoswipe.com/data-sources/#custom-html-markup

In short I want to have a responsive slideshow using WebP images that does only load marginally larger images than the current viewport width, so i.e. on mobile with a with of i.e. 320px I would want to see a slide of max 640px width and not i.e. 1600px width.

In an older version of PhotoSwipe GID and PID were available per slide in the URL. Is there an option to turn this feature on again ? If not, how could I provide a direct link to a specific slide that also opens that slide when sharing the URL between users ? Was this feature dropped completely ?

[robots4life]

In a Svelte component I have this markup.

<a
	href="{pictureData.url}"
	data-pswp-width="{pictureData.width}"
	data-pswp-height="{pictureData.height}"
	data-pswp-srcset="{srcSetWep}"
	target="_blank"
	rel="noreferrer"
>
	<picture>
		<source sizes="200px" srcset="{srcSetWep}" type="image/webp" />
		<img
			src="{pictureData.url}"
			sizes="200px"
			srcset="{srcSet}"
			width="{pictureData.width}"
			height="{pictureData.height}"
			alt="{pictureData.altText.text}"
		/>
	</picture>
</a>

<style>
	img {
		max-width: 200px;
	}
</style>

This works exactly like I wanted it and shows responsive and WebP images in the slideshow, only being marginally wider than the current viewport width due to me limiting the steps in the generated srcSet.

Looking at the generated markup I do see the difference between this and what this is about https://photoswipe.com/custom-content/#using-webp-image-format however for a fast solution this works just fine.

Might swap data-pswp-srcset="{srcSetWep}" with data-pswp-srcset="{srcSet}" but https://caniuse.com/webp is well supported, so this should also work just fine.

If anyone has info on GID and PID let me know, thx.

[acwolff]

See the code I use at #2032