Css --webkit-image-set() syntax doesn't work for Chrome

Question

I want to use .avif and .webp for images on my website, remembering that I need provide fallback for unsupported browsers. Docs https://developer.mozilla.org/en-US/docs/Web/CSS/image/image-set()#using_image-set_to_provide_alternative_formats suggest that -webkit-image-set should help:

background-image: url("/public/header-fallback.jpg");
background-image: -webkit-image-set(url('/public/header.avif') type('image/avif'), url('/public/header.webp') type('image/webp'), url('/public/header.jpg') type('image/jpeg'));

This works in Firefox (avif is skipped and webp is used) but Chrome gives me Invalid property value (entire style is ignored and 'header-fallback.jpg' is used). Why?

Answer 1

It's seems that chrome not fully supports image-set

our implementation has not been per the spec, as only URL values were accepted for the image, and only resolutions with 'x' as a unit were accepted.

source

To make it work with chrome try remove the type and add 1x instead

url('https://url.avif') 1x