Photoswipe: High resolution image always loaded even though a smaller images exist

[ottok]

What happened?

I am using the built-in Photoswipe on my site. Example post at https://optimizedbyotto.com/post/gitlab-mariadb-debian/

The width of the box where the image is shown is 817 pixels:

From the automatic downscaled images generated by Hugo, the 1024 px wide would be enough for this view: https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example_hud15c7454f04aaeae0ed05bf49d3115d8_214572_1024x0_resize_box_3.png

However, seems that the original 1694 pixel wide image https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example.png is always used no matter how narrow the rendered image is.

Tag has:

<img src="https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example.png" 
  width="1694" height="1119" 
  srcset="
    https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example_hud15c7454f04aaeae0ed05bf49d3115d8_214572_480x0_resize_box_3.png 480w,
    https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example_hud15c7454f04aaeae0ed05bf49d3115d8_214572_1024x0_resize_box_3.png 1024w, 
    https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example.png 1694w" 
  loading="lazy" alt="Example merge request" class="gallery-image" data-flex-grow="151" data-flex-basis="363px">

I don't now how this is supposed to work, but since the tag already has smaller images in srcset, perhaps there is some existing JavaScript that simply isn't loaded etc?

Hugo version

0.122.0

Theme version

1.0.0

What browsers are you seeing the problem on?

Chrome

Link to Minimal Reproducible Example

https://optimizedbyotto.com/post/gitlab-mariadb-debian/

[ottok]

In the interim I mitigated this issue by simply downscaling the source images to be max 1200 pixels wide as that is in this theme the post width is never wider than that, and thus overly large images will never be downloaded. With source image capped at 1200 pixels wide markup looks now as:

<img src="https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example.png"
  width="1200" height="793" 
  srcset="
    https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example_hu1e545c513263554b17d7fe1f91a3652c_202147_480x0_resize_box_3.png 480w,
    https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example.png 1200w" 
    loading="lazy" alt="Example merge request" class="gallery-image" data-flex-grow="151" data-flex-basis="363px">

The ideal solution would however be that the smaller https://optimizedbyotto.com/post/gitlab-mariadb-debian/gitlab-merge-request-example_hu1e545c513263554b17d7fe1f91a3652c_202147_480x0_resize_box_3.png loaded on page load, and the full-sized only then clicked by user.