[css-images] image-set() resolution should be applied on-top of, not instead-of the natural image resolution.

[emilio]

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

If not specified, it behaves as 1x for the purpose of selecting which to use. It also defaults the image’s natural resolution to 1x, but if some other source of data supplies a natural resolution, that resolution must be honored instead.

That doesn't seem to match implementations, which apply the scaling on top of the natural orientation of the image. See whatwg/html#5574 (comment) and previous discussion.

cc @noamr

[css-meeting-bot]

The CSS Working Group just discussed [css-images] image-set() resolution should be applied on-top of, not instead-of the natural image resolution., and agreed to the following:

• RESOLVED: image-set should act like sRCset attribute with applying resolution

The full IRC log of that discussion

<dael> Topic: [css-images] image-set() resolution should be applied on-top of, not instead-of the natural image resolution.
<dael> github: https://github.com//issues/6241
<dael> emilio: Matches existing impl. Basically spec says if you omit image-set resolution then you use natural image resolution
<dael> emilio: If you spec image-set resolution it overrides whatever resolution image has
<dael> emilio: Allows to figure out if image has native resolution. Not amazing. Chrome and WK apply image resolution and then image-set resolution. Seems reasonable and sensible
<dael> emilio: So this should agree with existing impl
<dael> TabAtkins: Happy to resolve on agree with existing impl. I'm not sure how this is supposed to work from reading thread. Do not understand multiplying resolution by exif resolution gives you something usable
<dael> emilio: It's a cross-origin info leak
<dael> TabAtkins: I suspect something more subtile is happening than I understand. Feels rediculous. But we'll figure it out
<dael> emilio: If you find out what it is that's great
<dael> TabAtkins: I'd like us to match so happy to resolve
<dael> TabAtkins: Prop: image-set should act like source-set attribute with applying resolution
<TabAtkins> s/source-set/srcset/
<dael> Rossen_: Objections?
<dael> RESOLVED: image-set should act like sRCset attribute with applying resolution

[zcorpan]

So if I understand correctly, we want this:

• First, apply the EXIF intrinsic sizing
• Then, apply the image-set() or srcset density as a multiplier.

[noamr]

So if I understand correctly, we want this:

• First, apply the EXIF intrinsic sizing
• Then, apply the image-set() or srcset density as a multiplier.

Exactly. That’s the current implementation. If WPT/selenium supported DPR we could add tests for this.

[zcorpan]

OK, thanks. It should work that way both for same-origin and CORS-cross-origin, right?

[zcorpan]

If so, the from-image value is equivalent to 1x, right? Should we drop from-image?

[noamr]

OK, thanks. It should work that way both for same-origin and CORS-cross-origin, right?

Yes, origin is not playing a part in this. The rationale was we didn't want the image's CORS-ness to affect its natural size in implicit ways.

Where CORS would play a part would be if we ever implement CSS image-resolution in a way that would override the EXIF resolution behavior.

[noamr]

If so, the from-image value is equivalent to 1x, right? Should we drop from-image?

You mean image-resolution: from-image? See above. If we were to implement this, it is where CORS would kick in - as image-resolution would expose whether an image is EXIF-resolution-corrected and that information shouldn't leak cross origins.

I am not sure there is an actual use for image-resolution - I think image-orientation is used mainly for backwards compatibility issues, which is less of a problem with resolution.

[zcorpan]

You mean image-resolution: from-image?

Yes.

See above. If we were to implement this, it is where CORS would kick in - as image-resolution would expose whether an image is EXIF-resolution-corrected and that information shouldn't leak cross origins.

I am not sure there is an actual use for image-resolution - I think image-orientation is used mainly for backwards compatibility issues, which is less of a problem with resolution.

OK. I'll file a separate issue about image-resolution since this issue is about image-set(). #6317

[zcorpan]

If WPT/selenium supported DPR we could add tests for this.

I think it should be testable anyway. Have an image with 2x density per EXIF, and use it in image-set("image.png" 3x). Test that the image has 6x density with .clientWidth.