Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
<!-- we currently have srcset... -->
<img src="banner.jpeg" srcset="banner-HD.jpeg 2x, banner-phone.jpeg 100w, banner-phone-HD.jpeg 100w 2x">
/* We also have image-set */
.whatever {
background-image: image-set(
"foo.png" 1x,
"foo-2x.png" 2x,
"foo-print.png" 600dpi
Of course, the two are incompatible. srcset doesn't support dpi, and
image-set doesn't support w & h units.
Idea: ditch srcset, defer image selection to CSS:
<img content="image-set('banner-HD.jpeg' 2x, 'banner-phone.jpeg' 100w, 'banner-phone-HD.jpeg' 100w 2x)">
Asumming we get w & h support into CSS. This allows for other CSS functions to select imagery:
<img content="image('whatever.webbp' format('webp'), 'whatever.jpg')">
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.