Crisp Background Images with CSS image-set()

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 the image-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.

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!