When Safari 17 is released image-set() will be fully supported by all browsers. The caniuse information is currently innaccurate. Chrome does fully support image-set() but shipped support for the type argument in version 115.

AVIF is a relatively new image format. It’s supported in all browsers except for Microsoft Edge. Edge is built on Chromium so normally has the same features as Google Chrome. The current lack of support for AVIF is apparently due to licensing issues.

JPEG XL is another modern image format. It is only supported by the forthcoming Safari 17 (it is not clear if it will ever be implemented by Chrome or Firefox).

image-set() gives us a way to use JPEG XL or AVIF images as a background-image in CSS while sending an older image format like WebP or PNG to browsers that don’t support the newer format. That way you gain performance improvements for some users while ensuring all users will see the image:

Example using AVIF:

.hero-section {
    background-image: image-set(
        "coolbackground.avif" type("image/avif"),
        "coolbackground.png" type("image/png")
    );
}

Example using JPEG XL:

.hero-section {
  background-image: image-set(
    url("coolbackground.jxl") type("image/jxl"),
    url("coolbackground.png") type("image/png")
  );
}