`srcset`: `vw` + `vh` combined descriptors
strarsis opened this issue · 3 comments
Currently srcset only supports one single descriptor (e.g. vw or vh), but not multiple ones (e.g. vw and vh).
However, the image in question is cropped and available for different widths and heights - and the actual dimensions depend on a container with unpredictable dimensions (using mediaquries as in sizes).
A library like lazysizes would fit perfectly here as it can calculate the exact dimensions during the layout changes without prior knowledge.
As already JavaScript is used, it would be nice to also take the width + height combinations into acount.
A traditional srcset would look like this:
200x100.jpg 200vw, 300x100.jpg 300vw, 400x100.jpg 400vw
A srcset analog (e.g. data-srcset-vh or data-srcset-multi) that can take also the height into account could look like this:
200x100 jpg 200vw 100vh, 200x200 jpg 200vw 200vh, 300x100.jpg 300vw 100vh, 300x200.jpg 300vw 200vh, 400x100.jpg 400vw 100vh. 400x200.jpg 400vw 200vh
Now a suitable image can be picked for image elements that have 100px height and 200px height - or between/below.
Can lazysizes also handle these kinds of calculations?
I think you don't really understand the meaning of the images inside of one srcset. It is also w and h descriptors not vh/vw. They don't have to do anything with the viewport. Also you can already combine w and h descriptors. Only h descriptors aren't supported natively.
A plugin that chooses the best image based on width and height is the following one:
https://github.com/aFarkas/lazysizes/tree/gh-pages/plugins/artdirect
But if you understand the semantics of responsive images better. You will see artdirect is exactly what you want.
@aFarkas: Yes, I notice that I confused sizes and srcset in the question.
Yes, the artdirect plugin is very useful for the problem I got.
However, one thing could make it even simpler:
If the plugin could determine the appropriate image by also taking the height automatically into account (vh):
I would specify what width-height combinations of the image are available and that the image should be scaled to cover the element.
Then the plugin should use the current width-height of the element and pick the image with the closest width-height combination.
The parent-fit plugin can be configured to do this: #931 (comment)