Re: [csswg-drafts] [css-images] Images on the web (#5173)

>  to make the fundamentals a bit clearer to implementers,

👋 

We've walked right into this one - I thought we'd fully implemented css-images-3 but, having found https://github.com/whatwg/html/pull/5574 and the corresponding testcases I can see that's the wrong thing to do if we want to match browser implementations.

As specified in css-images: the image-resolution (theoretically from the `image-resolution` property, although it's unimplemented) defaults to 1dppx, but can be set to `from-image` to take the _natural resolution_ from a bitmap. If the image is loaded from `image-set()`, the natural resolution is _overridden_ by the resolution from there.  The exact definition of _natural resolution_ is undefined in CSS, but given it is defined in JPEG (JFIF) and PNG (pHYs) it seemed clear enough.

What actually happens is the image resolution defaults to the natural resolution of the image, but only if its specified by a particular combination of EXIF tags rather than the tags designed for this purpose in the JPEG and PNG specs (for compat reasons - having read the full PR above I understand why, but this isn't even hinted at in css-images-3 and it's far from obvious). If loaded from `image-set()` the natural resolution is _multiplied_ by the resolution from there (see https://github.com/w3c/csswg-drafts/issues/6241)

It's quite different. Particular issues:

1. The rules in the HTML spec apply even to `background-image`, `content`, SVG `<image>` and contexts where I had not expected the HTML image sizing rules to apply.
2. The rules for extracting natural dimensions are very specific and cannot be applied to PNG, despite PNG images with resolution units being used for some related examples, eg https://webkit.org/demos/srcset/. These are _false friends_ - the resolution units are in the files, the example is demonstrating resolution units, but those facts are unrelated: the units from the file are not used. This only became clear when we revisited [#6241](https://github.com/w3c/csswg-drafts/issues/6241) and found it meant scaling was now being applied twice.

I write this in the hope an anatomy of our failure can improve things, but the short version is:

> I think it's problematic that both CSS and HTML attempt to define images for the web.

-- 
GitHub Notification of comment by faceless2
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5173#issuecomment-1054582366 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 28 February 2022 19:19:16 UTC