10

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?

Sonny D
  • 897
  • 9
  • 29
  • It looks like Chrome does not support types in (-webkit-)image-set yet; see section Browser Support here: https://dev.to/jsnkuhn/notes-on-image-set-with-type-55f0 – Thomas Altmann Nov 04 '21 at 21:01
  • As per https://bugs.chromium.org/p/chromium/issues/detail?id=630597&can=2&q=css%20image-set (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. – machineghost Nov 04 '21 at 21:55
  • 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. – ViliusL Nov 11 '21 at 11:41
  • First page you **always** check: https://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.* – connexo Nov 11 '21 at 20:29

1 Answers1

3

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
GoDLighT
  • 148
  • 10