Serve sharp backgrounds without extra code.
Let the browser pick the right asset.
image-set() is like srcset, but for CSS.
You give multiple sources. The browser chooses the best one for the screen.
Why use it:
- Retina screens get crisp images.
- Regular screens download smaller files.
- No JavaScript. No hacks.
It also works in other image-accepting properties like content, list-style-image, and border-image(but with less browser support).
Using image-set() in a background-image property has almost 96% browser support!
Practical tips:
- Add a plain fallback first for older browsers:
background-image: url("evee.png");then theimage-set(). - Keep file names consistent (@1x, @2x) to simplify builds.
- Pair with background-size: cover/contain as needed.
- Test AVIF/WEBP plus JPEG/PNG as a safe fallback.
To learn more tips about CSS, make sure to join my newsletter below ❤️