r/webdev • u/wanoo21 full-stack • Apr 21 '26
Resource CSS image-set() just became the hero we needed
Has been widely available since September 2023
35
Apr 21 '26
[removed] — view removed comment
19
u/Lexeor Apr 21 '26
Now we need to wait another 3 years until it’ll be available across most popular browsers :)
21
u/avec_fromage Apr 21 '26
CanIUse says it's available for 96.69% of all users. Only browsers not supporting it is QQ-Browser, Baidu-Browser, KaiOS browser and Opera-Mini.
9
u/mypetocean Apr 21 '26
That's with prefixes (
-webkit-). 93.48% support without prefixes is a better representation.But that's pretty good, seeing as even
<html>only enjoys 97.02% support. 😆6
u/bomphcheese Apr 21 '26
Really? That's hilarious
3
u/mypetocean Apr 21 '26
Yep, and it's always relevant every time someone complains about browser support for something above ~90%. It becomes proportionally more relevant as that number approaches 97%.
I use this as a reality check pretty regularly in browser tech decisions.
2
6
u/MugentokiSensei front-end Apr 21 '26
I just checked it and to my surprise, it's already supported pretty well.
~92% fully implemented
~5% (older versions) partial support with only "url(...) x"
2
1
1
52
u/codev_ Apr 21 '26
What about both resolution switching and format switching at once?
112
u/wanoo21 full-stack Apr 21 '26
Yes, it does support!
background-image: image-set( url('/hero.avif') type('image/avif') 1x, url('/hero.jpg') type('image/jpeg') 1x, url('/hero-2x.avif') type('image/avif') 2x, url('/hero-2x.jpg') type('image/jpeg') 2x );-35
u/thekwoka Apr 21 '26
please never suggest people actually do pixel density annotation. It's so dumb.
8
u/Traches Apr 21 '26
If it were a picture element you’d be correct - multipliers are for when the image is the same size in CSS pixels on all screens (thumbnails, icons, etc) and the only thing to account for is pixel ratio. You should give pixel values (and sizes if it’s not 100vw) for a hero image.
I haven’t learned about image-set yet though, maybe it’s different?
-12
u/thekwoka Apr 21 '26
It's the same logical system under the hood.
And of course, nothing is the same css pixels on all screens really.
47
u/ISDuffy Apr 21 '26
It great seeing this added, however I probably avoid it for a hero image as images inside of CSS can't be picked up by the preload scanner. Which will cause a slow LCP.
7
u/phoenix1984 Apr 21 '26
Preload “scanner”? Sounds like something unique to specific tool. There’s nothing stopping you from adding preload requests to the HTML or HTTP headers directly.
28
u/ISDuffy Apr 21 '26
Preload scanner is a part of the browser rendering engine, not unique to some tools.
Which can find assets while primary html parse is render blocked.
-3
u/phoenix1984 Apr 21 '26
Huh, is that really how it works under the hood? A dedicated scanner? I assumed it was a queue that the primary HTML parser and HTTP engine sent preload and preconnect requests to.
9
u/bomphcheese Apr 21 '26
You have to scan for the data before you can add it to any queue
-1
u/phoenix1984 Apr 21 '26
Well yeah, I was under the impression that was done by the primary HTML and HTTP parsers, not something dedicated. Seems kinda wasteful to have a dedicated scanner, but I’m sure there’s a good reason.
4
u/AwesomeFrisbee Apr 21 '26
Do people really use 1x and 2x at the same time? Is the difference not very marginal though?
10
u/bomphcheese Apr 21 '26
It depends on the use case and file size. For an actual photo, people generally will notice it less. For an illustration that should probably be an SVG, I go higher resolution so it doesn't look blurry. If the file size is small enough, I will just load the 2x version
17
u/thekwoka Apr 21 '26
People shouldn't use those at all.
Should do
180w, 360w, 720wetc. Well with other values, but not this stupid1x 2xshitWe all rocking displays doing like 3.5x
20
9
u/thekwoka Apr 21 '26
The 1x 2x thing is so 2018.
Are people still doing that?
You should be using the width annotation.
2
u/ISDuffy Apr 21 '26
Yeah, especially when using the w annotation it takes in the dpr size.
3
u/thekwoka Apr 21 '26
Yup, the browsers basically then go "okay, the image is X css pixels so multiply it by the dpr and pick the next largest". Or use a cached larger ones or maybe use a slightly smaller one if data saver is one. It's a cool system when you give it lots of options.
1
u/game-mad-web-dev Apr 24 '26
Delivering the correctly sized image over a remote mobile connection (developing countries, rural areas, etc…) or satellite connection can make a significant difference to user experience and page load times.
1
u/thekwoka Apr 24 '26
Yes, so use width annotation, not density.
Density won't give the correctly sized image.
Width will.
3
4
2
u/diptanshumahish Apr 21 '26
Does anyone actually use image-set() in production yet? Genuinely curious because I've mostly seen people stick with <picture> elements out of habit.
The syntax is definitely cleaner here, especially for hero images. My concern has always been: what happens if none of these load? Does it just fail silently? Worth testing before shipping.
1
u/Disgruntled__Goat Apr 21 '26
Does it actually work fully in all browsers? Used to be super buggy in multiple browsers.
1
1
u/pirinihacodes Apr 24 '26
Finally, CSS catching up to what we’ve been hacking around with <picture> and srcset for years 😄
-3
u/Key_Credit_525 Apr 21 '26
The bad part: this pattern breaks data & presentation separation principle. Personally I see the only real use case image-set() against the <picture> element it's a parallax background, and it's a good part
4
u/thekwoka Apr 21 '26
Yeah, the picture element is way better for sure.
1
u/Key_Credit_525 Apr 21 '26
Yeah! Although this opinion was dramatically downvoted by redditors who are don't care about maintenance after product launch, this is so funny 😄
1
-16
u/del_rio Apr 21 '26
Browsers took too long to implement this, you can now safely assume 90% of users are on high-dpi screens.
20
u/Roguepope I swear, say "Use jQuery" one more time!!! Apr 21 '26
You really can't. Plenty of folks using old 1080 monitors still.
-4
u/hiddencamel Apr 21 '26 edited Apr 22 '26
In my experience it's almost never worth worrying about 1x fallbacks in this day and age. Most users are on hi res mobiles, and the ones that aren't are on a laptop or desktop on a broadband connection where a few dozen extra kB for the higher res image will be imperceptible unless you're not adequately compressing your images or displaying dozens and dozens at the same time.
Edit: you guys do you, but I suggest you run the benchmarks and see how much difference it actually makes before you blindly quote "best practice" at me
3
u/thekwoka Apr 21 '26
There are phones that are 1080p and others that are 1440p for the same screen size.
So better to provide options for their browser to pick the best ones.
for desktop, people may be using the window not being full screen.
154
u/DrummerHead Apr 21 '26
Basically the
<picture>element at the CSS level