search

CaiJimmy / hugo-theme-stack

Card-style Hugo theme designed for bloggers
https://stack.jimmycai.com
GNU General Public License v3.0
4.89k stars 1.6k forks source link

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

Open ottok opened 7 months ago

ottok commented 7 months ago

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:

Screenshot from 2024-02-10 10-12-00

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 commented 6 months ago

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.