Description
This is more a discussion on how feasible it would be than a feature request
Some browser support defining responsive images in CSS, it would be nice if there was a way to write them as easily as it currently is in JS.
Unfortunately, CSS is a little less flexible when it comes to processing data at runtime. So anything the loader returns should be a string in this case.
Currently, the only way I would see it work is by declaring every size manually
background: image-set(
url('foo.png?sizes=200w') 1x,
url('foo.png?sizes=400w') 2x,
// ...
);
It isn't as short and simple as the JS version, but it would work and would at least automate the resizing part.
The main problem I have with it is that currently, this query would return an object containing exactly one size instead of a string. Changing the behavior to return a string when there is only one size and no placeholder would mean another breaking change and an inconsistent API, which I'm not sure I like.
Any ideas ? Should image-sets be supported by this loader ?