Feature: Lazy loaded zoom-to image for the <Image> component?

[rydmike]

The zoom an image is really nice and handy, it works well in typical use cases when you have a bit higher res image than what is used for the presentation normally on a docs site. I use it a lot, almost for all images.

https://use.docs.page/components/images#zooming

However, how does this work and perform if you have a lot of small thumbs that you would like to zoom to a much larger hires version of same image?

To be concrete, on these pages:

• https://docs.flexcolorscheme.com/all_themes
• https://docs.flexcolorscheme.com/scheme_reference

I use a lot (+100) of small thumb sized images, that are downsampled from hires originals, to keep page load "fast". I just did not dare to even try to use the original full size images coupled with the <Image> component, and just scale them to needed display sizes, and then couple this with its nice zooming.

I suspect the pages would then download the original full sized hires images for +100 images, causing the page load times to be painfully slow with slower internet connections.

So basically, those two above example pages just use standard html tables, that contain and load all the small thumb images and they then all have a link to its hires version. This works, but the hires image version then of course opens as its own image/page. Not as nice, but sure it works fine.

It would be much nicer, if I could use the <Image> component with its zoom feature for this too. However, I suspect for these pages to load fast with slower connections, the <Image> component would then need to support an extra image link used for the zoomed image, that it would only load on click, and then zoom to it, instead of just having one primary used display and zoomed image.

If this feature existed, you could of course also use it for normal less crazy use cases, than the above example pages, just to reduce page load times and provide hires images only when zooming.

[Ehesp]

Interesting! I think the Image component should be able to handle that, I just wonder whether it would also try to download both images at once (one for me to look into).

The other challenge is seeing whether custom components can be rendered within HTML/JSX within the markdown. Let me investigate!