css image-set()

[jsnkuhn]

Description

The CSS image-set() function adds HTML <picture> element like negotiation of different image resolutions and files types functionality to CSS.

Rationale

• parity with HTML <picture> functionality for CSS images is long overdue.
• with a new generation of image formats (AVIF, JXL, webp2) on the way now seems a good time to make CSS type() negotiation consistently available across browsers.
• in many cases <picture> is being used as an absolute positioned "background" to work around this issue. This breaks the separation of content and style but is a reasonable thing to do right now to get the functionality.
• chrome bug (has long been on the to do list just never been a super high priority i guess?): https://bugs.chromium.org/p/chromium/issues/detail?id=630597
• -webkit bug on type(): https://bugs.webkit.org/show_bug.cgi?id=225185

Specification

https://drafts.csswg.org/css-images-4/#image-set-notation

Tests

https://wpt.fyi/results/css/css-images/image-set?label=experimental&label=master&aligned

• Firefox is leading the way on support here.
• -webkit prefixes have been in place on Chrome and Safari for so long that it seems they are being treated as a css-images-3 version.
• Safari recently unprefixed image-set() but didn't add type() for some reason. type() negotiation has most recently been added to the spec.

[atjn]

I added some comments in support of this in #156

[fellyph]

Some items that pointed out on the issue #156:

• image-set() CSS property for background, is only supported by 74% of the browsers
• this feature can be a good performance improvement for the web
• background images are heavily used by CMS and page builders and in some case one image is defined to all screens, causing LCP issues on the mobile version.
• There are other solutions to solve it but image-set could simplify this implementation.

[atjn]

image-set() property, is only supported by 74% of the browsers

What do you mean by this? It has universal support (97% in the wild), but there is varying levels of support for it. Source: https://caniuse.com/css-image-set

[fellyph]

@atjn image-set on background images: https://caniuse.com/mdn-css_properties_background-image_image-set
I have updated the comment now.

[atjn]

@fellyph image-set on background images is the same as image-set. There is no image-set for something else.

The MDN data you are linking to is unfortunately not up to date - it should show the same support that is shown in my source.

You can validate this by looking at the Web Platform Tests: https://wpt.fyi/results/css/css-images/image-set
Unlike Caniuse and MDN, these are automatically updated, so they will always be correct.

[gsnedders]

Briefly looking through test results:

• Chrome doesn't support the unprefixed image-set
• Safari supports both, but -webkit-image-set isn't an alias of image-set (because aliasing this regressed Gmail due to an unrelated bug)
• Safari fails a lot of serialisation tests (mostly as it preserves 1x as distinct from 1dppx)
• Firefox fails a few linear-gradient tests.

Given the difficulty Safari had with aliasing -webkit-image-set, it makes me question whether it should be included as part of this (as the current tests mix the two).

For the curious, Gmail contains a variety of declarations (for a variety of class names) like:

.klass:before {
    content: "";
    content: -webkit-image-set("" 1x, "" 2x)
}

It's not immediately clear to me what the goal of these declarations is.

[jsnkuhn]

My understanding of the purpose of this process is to let browser vendors know what it is that developers want. As a developer I want parity between what I can do with images in HTML and CSS. Cross browser consistent support of image-set() would go a long way here. The <picture> element has been long established in HTML for content images but for some reason that same functionality has not been included across browser in CSS for styling images.

The original -webkit syntax was, if i remember correctly, a Safari unoff that was later made into a spec with some significant changes. The tests as created by Firefox during their implementation treat the -webkit version as a faux css-images-3 version and include the unprefixed version as css-images-4. This is an unfortunate necessity because of how long browser vendors have sat on this property.

[foolip]

@gsnedders on the aliasing issue, how about we include that with an understanding that the Chrome team will work with the Gmail team to fix that problem, but if we fail we change/exclude the tests in question?

[foolip]

There were some mentions of this feature in State of CSS 2022, although not enough to make the top list in #248. 18 mentions is almost 1% of the 1995 responses, and these are the ones that included some detail:

• responsive background images
• image-set cannot replace picture + source yet
• image-set() has terrible supporty making it harder to use AVIF and JPEG XL
• Responsive images in combination with webp are still not very well supported, e.g. inside the image-set() feature.
• responsive images with background images is still quite tricky

[foolip]

In the MDN short survey on CSS & HTML, "CSS images (border-image, image(), image-set())" was selected by ~19% of survey takers, putting it in the middle third of the 20 options. (There is some uncertainty as with any survey data.)

Since this option bundled together multiple proposals we can't know what resonated, but given the State of CSS results I'm fairly certain it was mostly image-set().

[jsnkuhn]

There has been some movement on image-set() in Chromium in the last few weeks. The bug listed in the OP for unprefixing -webkit-image-set() (https://bugs.chromium.org/p/chromium/issues/detail?id=630597) is now marked Fixed (Closed)

There are now 2 new bugs:

Issue 1399341: Support type() notation in css image-set()
https://bugs.chromium.org/p/chromium/issues/detail?id=1399341&q=image-set%28%29&can=2

Issue 1394277: Fix dynamic image-set related tests
https://bugs.chromium.org/p/chromium/issues/detail?id=1394277&q=image-set%28%29&can=2

[nairnandu]

Thank you for proposing CSS image-set() for inclusion in Interop 2023.

We are pleased to let you know that this proposal was accepted as part of the Web Compatibility focus area. You can follow the progress of this Focus Area on the Interop 2023 dashboard.

For an overview of our process, see the proposal selection summary. Thank you for contributing to Interop 2023!

Posted on behalf of the Interop team.