CSS image-set() Generator

Build a CSS image-set() declaration that hands the browser several image sources annotated by pixel density (and optionally MIME type). The browser picks the best match for the current device. Useful for retina backgrounds, mask images, and AVIF/WebP/JPG format fallbacks — without ever serving a wasted byte.

CSS property

Image variants

URLDensityMIME type

Add legacy -webkit-image-set() + plain url() fallback

Plain-url() fallback variant

Pick the variant used as the url() fallback for browsers that don't understand image-set() at all.

Extra declaration values (optional)

Appended after the image-set() call. Useful when generating background shorthand.

Live preview

Detected device pixel ratio: — · Best matched variant: —

Support: Unprefixed image-set(): Chrome 113+, Edge 113+, Firefox 88+, Safari 17+ (Sep 2023). Older WebKit/Blink shipped -webkit-image-set() — keep both for now.

Generated CSS

How browsers pick a variant

Each entry in image-set() carries a resolution hint expressed as 1x, 2x, 1.5dppx, or 96dpi. The browser combines this with window.devicePixelRatio and picks the lowest-resolution source whose density is still ≥ the device's. If you also include type() annotations, the browser additionally skips entries whose format it can't decode — letting you serve AVIF first, then WebP, then JPG, in a single declaration with no JavaScript. Unlike <img srcset>, image-set() works in CSS contexts (backgrounds, masks, borders), but does not support viewport-width hints (w) — for those keep using <picture> / srcset.