What I didn't solve in the demo yet, is using adaptive images. All breakpoints still use the full res image. @Oleg Isonen maybe a section to share user-resources that don't deserve a marketplace entry made sense? I had to post this under Help.
OK, will repost there later.
Effectively to get responsive images one needs to use Image component that has everything prepared
But most light boxes want you to provide a single url I think, especially those that want to get the url from href of the link
Hmm, I had expected roughly the following to happen:
1) Webstudio hands over to Cloudflare a large, uncompressed source-image.
2) Some device / browser requests a page with that image.
3) Based on the container size / pixel density Cloudflare creates a compressed rendition from the source-image that closely matches the pixel-dimensions of that container. Ideally, very little browser-scaling would place. CF sends the image in a file format the browser can handle. If it is a popular device, that rendition likely is already available in the nearest CF datacenter and loads almost instantly. If the format was not yet requested in the current cache interval, it might need a few miliseconds longer.
For Lightboxes, the first enlargement step would fill the browser of the requesting device (ideally again no browser-scaling taking place). If the source image is considerably larger, one could allow zooming (this time using an optimized rendition at original pixel dimensions).
its not based on container size, its based on viewport size and its not cloudflare who is doing that, its the img element itself
we set up img html element so that it has a bunch of sizes to choose from depending on viewport size
but with just having a single url, this is all gone
which is one a good lightbox needs to use an actual img element, ideally ours
maybe some have the same functionality with a responsive image? idk but in that case they would need to be able to build the right url with the right size params
I don't think any of them can do this
lightbox effect is actually not that hard, there must be some implementation that can use an img tag provided
well or alternatively just have a single big size thats just rendered on any screen size and that's it, not super optimal but it might be not terrible either
in this case just providing the url with chosen width/height for the big image is enough
so any of them would work
the only trouble I see is that this would force you to hardcode the url if you do it from the builder, an option could be to have a simple script that takes the url from thumb, changes width/heigh params and provides it to the lightbox script or sets it to the anchor element if that's how the script works, this is actually not hard, probably 30 min of work to wirte that script, 10 lines of code or less
I'm just wondering if Cloudflare wouldn't offer you a more automated way handle this... The product from the first screenshot claims not to work with preset sizes, but to truly deliver according to specs. I would be surprised, if Cloudflare doesn't offer the same. Sounds to me as if this might be a universal improvement.
If you look at images on your website, your preset images may be much larger than needed. I just altered the parameter in the image URL to output dimensions and the image-size decreased considerably.
cloudflare doesn't know the viewport size, only browser does
preset sizes are not exact, they are a set of approximations for popular resolutions
The idea of these tools is that they start looking at the browser. Then they create the image.
yeah, the idea is that html does this
but it doesn't do this fully automatically, it stillr equires a set of images
their own image is renderred in a twice smaller size than the actually fetched one
also its a problem that you would get too many variants
storage would blow up in cost
so no, nobody is gonna do what you think, delivering image based on the layout
just rendering one that fits best for a viewport is what we are at as an industry
well img element does know it's size and can choose something that's based on it's size from the list of options
so its not completely based on viewport only
but from a list of predefined sizes
Thanks for this explanation 🙏
So best would be a proper Webstudio Lightbox at some point 😛. If one still needed to use larger dimensions than technically necessary, using blurred placeholders or using a bit of transition could smooth out UX.
yeah, though even template with one good setup would be pretty good already
