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?

Vide

It looks like Chrome does not support types in (-webkit-)image-set yet; see section Browser Support here: dev.to/jsnkuhn/notes-on-image-set-with-type-55f0 – Atomy

As per bugs.chromium.org/p/chromium/issues/… (the bug linked in the article you linked), it 100% should be working for the prefixed version. The bug is to remove the prefix from the (presumably functional) prefixed version. – Partridge

If you skip type, it works on Chrome, but Safari & Edge will break. If you include type, Chrome is not ready for this yet. So we still need to wait. – Swob

First page you always check: caniuse.com/css-image-set [Chrome] Has very limited support. Only url() is accepted as the image and only x is accepted as a resolution. – Vibrations

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

Mayan