I realized the image-set() function is completely broken when it comes to responsive images. It appears not to be equivalent to the responsive img html element, because you can’t use image width, just pixel density or format. Is there a reason why they didn’t just mirror what we can do with img (and srcset) ? We could get rid of media queries for a few contexts. Did someone find a way around this ?
And it would avoid loading several background of different sizes, instead sticking with the biggest already loaded.
You are right and the image-set() is really only interested in selecting the appropriate image for the medium and doesn’t have the equivalent “sizes” attribute to differentiate screen widths etc. (Resolution can be used as a proxy for filesize.)
You do of course have media queries which will accomplish almost the same thing except that the image tag version won’t reuse an already-loaded background automatically when switching media queries — if you switch background-image values, the browser may fetch a new file. <img> has much more sophisticated resource selection and reuse logic.
I guess part of the reason is that background-images are considered decoration and not content as such and probably would not be swapped around as much as content images (that’s just a guess). Also I expect that adding an equivalent sizes function into the background image property is going to be quite complex especially when you can already do it by just using the image tag instead.
For now you are pretty much stuck to using media queries for background images I’m afraid but looking at the specs they have highlighted those issues which may mean that a future version may have the width and heigh available.
Issue 1: This solution assumes that resolution is a proxy for filesize, and therefore doesn’t appropriately handle multi-resolution sets of vector images, or mixing vector images with raster ones (e.g. for icons). For example, use a vector for high-res, pixel-optimized bitmap for low-res, and same vector again for low-bandwidth (because it’s much smaller, even though it’s higher resolution).
Issue 2: We should add “w” and “h” dimensions as a possibility to match the functionality of HTML’s picture.
If I was a developper, I would always, always seek consistency and symmetry of feature before adding anything**.**
If Google didn’t nuke adoption of jxl images, we could imagine responsivity would be backed in it (display would wait until layout information is obtained, something made easier if contain:layout is set). Alas. Sure backgrounds are not content, but maybe you don’t wish to load onto a mobile phone a 5Mb picture fitting a HDR, 4k screen…
