RESOLVED DUPLICATE of bug 257100257193
Support for type() function in image-set 
https://bugs.webkit.org/show_bug.cgi?id=257193
Summary Support for type() function in image-set
Oliver Williams
Reported 2023-05-23 03:00:54 PDT
CanIUse claims that Safari Technology Preview fully supports image-set(). This is inaccurate as Safari still does not support specifying a type: body { background-image: image-set( "house.webp" type("image/webp"), "house.png" type("image/png") ); } Safari will use the png even though it supports webp.
Attachments
Add attachment proposed patch, testcase, etc.
Tim Nguyen (:ntim)
Comment 1 2023-05-23 18:43:20 PDT
Safari definitely supports the type function, it's just that it chooses to use the PNG, which might be the wrong choice fwiw.
Ryan Reno
Comment 2 2023-05-23 19:38:43 PDT
The standard doesn't specify how a User Agent is supposed to choose an image from all the supported options. The way the algorithm is implemented right now in WebKit (no guarantees it's going to stay this way forever) we happen to choose the last image in your example set. If you really want webp in this scenario you can swap the order of the image-set-options (arguments) and WebKit will choose the webp image. Step two of the algorithm says we should remove duplicate resolutions from the set but then you'd get the webp as written but the png if you changed the order of the image-set-options. I'm not sure that's really correct either though it would have given you the image you expected in this example. So in summary yes we do support type() but it's left up to the User Agent which image it chooses from the given set. You shouldn't rely on any specific image being chosen from the set of supported images as browsers are free to choose whichever one they want after filtering. As of today our algorithm will pick either the first image whose given MIME type is supported and whose resolution is greater or equal to the device resolution or the last valid image in the given set.
Oliver Williams
Comment 3 2023-05-23 21:24:59 PDT
The spec explicitly mentions the use case I am talking about: https://www.w3.org/TR/css-images-4/#example-0c5931ca Safari does opposite of other browsers, which is clearly a web compat issue. The proper behaviour is implemented in Firefox stable and Chrome Canary.
Ryan Reno
Comment 4 2023-05-23 22:55:14 PDT
Ah ok I see what the issue is. The example in the spec is relying on us ignoring duplicate resolutions we have already seen in the set. Thanks for your report. *** This bug has been marked as a duplicate of bug 257100 ***
Note You need to log in before you can comment on or make changes to this bug.