Add srcset for images

[oliverpool]

First of all thank you very much for this fantastic tool! Getting started is very fast (but spending some times allows for advanced customization quite easily).

I have a site where the images get resized automatically and a srcset attribute added so that the right image is loaded, depending on screen size.

Currently only the src attribute is extracted and used for the image display.

It would be nice if the srcset attribute was extracted and added as well (so that the client does not download an image that is too large).

---

To fully take advantage of the srcset a sizes should be added as well. I think this sizes value should be an option of the PageFindUI (the same value for all images). I don't know if a sensible default can be provided (maybe 30vw since the width: min(30%, ...) will be at most 30% of the viewport width).

[oliverpool]

Concrete example: the website of a german scout troop, generated with astro and astro-imagetools:

On this page https://www.dpsg-toelz.de/aktuell/2023/ankuendigung-foehnsturm-2023/ :

• the original PNG image is 2MB.
• When loaded (if webp is not supported) ta "reduced" 1.5 MB PNG image gets loaded, thanks to the srcset.

When searching for this page Ankündigung: Föhnsturm 2023:

• you currently get the 2 MB image
• having a srcset on the search result would load the 1.5 MB file.
• Having the sizes="30vw" attribute as well would load a 540 KB PNG image.

(To load the webp, pagefind would need to support <picture>, but I think this would be to much effort for little gain - styling picture tag can be challenging).

[oliverpool]

From glancing over the code, I think adding srcset support would mean modifying 2 files (+ tests):

https://github.com/CloudCannon/pagefind/blob/e6de8bf4e78e8838403d9b1cb3adb7f1e9a6ff30/pagefind/src/fossick/parser.rs#L398-L404

https://github.com/CloudCannon/pagefind/blob/9db07e3065240e97c6f6c41f72ca2a118b8e3426/pagefind_ui/default/svelte/result.svelte#L32-L33

[bglw]

👋 Thanks for the thorough issue. I'll have a think — my aim is to keep configuration to a minimum for the default UI so that it doesn't become unwieldy. My usual advice would be to add a data-pagefind-meta="image: . . . attribute to the page containing the smaller srcsetted image, so only that option would be loaded. I do see that this would be a challenge if those srcsets are generated by your build process though, and were unavailable to your templating.

One option would be for the Pagefind indexing step to try and grab a smaller URL out of the srcset attribute directly, rather than passing the entirety of it through to the frontend.

This might also be a good fit for the new modular-ui direction, which lets you template out your results directly, so things like the <picture> tag would be possible.

[oliverpool]

Thanks for this hint regarding data-pagefind-meta, I will try to do some hacking around the build process to try to extract the srcset.

Another advantage of using srcset is for high-resolution display (requesting 1x, 2x or 3x resolution depending on the screen).

If I understand the code correctly, adding srcset would only increase the size of the pf_fragment files (since they do not need to be indexed).

I understand your concerns regarding the UI configuration growth (regarding an eventual sizes argument). Maybe an image key could replace the showImages key:

• if null or undefined no image are shown (or showImages is set, to retain backward-compatibility)
• if it is an object, like { sizes:"30vw"}, default values are added and images are shown.