"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 ?"
"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."
image-set() only supports resolution (pixel-density) and type descriptors rather than width-based descriptors like srcset's 'w' candidates. That prevents selecting background images based on layout width and complicates art-direction for CSS backgrounds. Some implementations may select or download multiple background candidates, increasing bandwidth and redundant requests. Reliable responsive selection still requires img with srcset/sizes or picture for art-directed sources. Practical workarounds include using positioned img/picture elements with object-fit to emulate backgrounds, targeted media queries to swap background images, or JavaScript that sets background images based on container or viewport dimensions.
Read at SitePoint Forums | Web Development & Design Community
Unable to calculate read time
Collection
[
|
...
]