CSS image() function

[BearCooder]

Description

Was proposed last year too by @jsnkuhn

The image() function allows an author to:

• use media fragments to clip out a portion of an image
• use a solid color as an image
• fallback to a solid-color image, when the image at the specified url can’t be downloaded or decoded
• automatically respect the image orientation specified in the image’s metadata

spec fixes many long standing issues with CSS images:

• a simplified syntax for image spriting that doesn't require 3 different CSS properties: background-image: image('sprites.svg#xywh=40,0,20,20');. This is a similar syntax as is used in object-view-box. Would be wonderful to finally have parity for background and foreground images. This also opens up the use of background-size and background-position for actual sizing and positioning of these images instead of dealing with the spriting.

• ability to create a solid color image like this: background-image: image(red); instead of hacking a gradient like this: linear-gradient(red, red). Is good for devs because it's less repetition in the code and for browser vendors i'm guessing this would allow a path to a separate algorithm for just rendering a solid colored image.

• Proper image fall-backs which url() can't do. When the image at the specified url can’t be downloaded or decoded, fallback to another image or color. This could lead to less background colors that are never seen being painted behind images.

• automatically respect the image orientation specified in the image’s metadata.

FYI: the above are all from images-4 but the CSSWG is already looking at expanding image() in images-5 for things like background video (https://github.com/w3c/csswg-drafts/issues/6732) and @image-manipulation (https://github.com/w3c/csswg-drafts/issues/6807)

more detailed explainer: https://12daysofweb.dev/2022/css-image/

Tests

https://wpt.fyi/results/?label=master&label=experimental&aligned&view=subtest&q=css-image-fallbacks

• only 5 tests right now all seems to be about "Solid-color Images" and "Image Fallbacks"
• linked bug for chrome is about image-set() not image() - https://bugs.chromium.org/p/chromium/issues/detail?id=630597

Standards Positions

Mozilla: https://github.com/mozilla/standards-positions/issues/856

Browser bug reports

• Firefox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=703217
• chrome bug: https://bugs.chromium.org/p/chromium/issues/detail?id=254753#c_ts1639769079
• webkit bug: https://bugs.webkit.org/show_bug.cgi?id=72584

Polls & Surveys

https://2023.stateofcss.com/en-US/features/

are aware: 2876 have used: 1418

Workarounds

There is a postCSS plugin for image() https://github.com/valtlai/postcss-color-image

Specification

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

Additional Signals

No response

[jsnkuhn]

just opened a standards position issue for webkit: https://github.com/WebKit/standards-positions/issues/402

[wpt-interop]

Thank you for proposing CSS image() function for inclusion in Interop 2025.

We wanted to let you know that this proposal was not selected to be part of Interop this year.

On behalf of the entire Interop team, thank you for submitting this proposal for consideration. We got many more proposals than we could include in this year's project, necessitating some difficult choices. Please note this should not be taken as a comment on the technology as a whole, or our willingness to consider it for Interop in the future. We appreciate the work you put into your proposal, and would welcome your participation in future rounds of Interop.

For an overview of our process, see proposal selection. Thank you again for contributing to Interop 2025.

Posted on behalf of the Interop team.