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 [whatwg/html#5574](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 #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.

HTML sizing rules have always applied to CSS - e.g. determining the default tile size in backgrounds. I am surprised though that there is no explicit link from [CSS natural sizing definition](https://www.w3.org/TR/css-images-3/#natural-dimensions) to [HTML natural sizing definition](https://www.w3.org/TR/css-images-3/#natural-dimensions). Not sure if I'll have time to propose a PR for this myself :(

> 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.

Why can they not apply to PNG? `PNG` can include `EXIF` tags embedded in `XMP`. In fact, the Mac/iOS Safari implementation does this out of the box because it relies on the Core Foundation libraries that parse XMP-EXIF internally.


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


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

Received on Tuesday, 1 March 2022 09:51:58 UTC