[csswg-drafts] [css-images] Proposal: determine default image-resolution from a combination of EXIF properties (#5025)

noamr has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-images] Proposal: determine default image-resolution from a combination of EXIF properties ==
This is basically a more formal copy of the proposal in the incubator: https://discourse.wicg.io/t/proposal-exif-image-resolution-auto-and-from-image/4326/24

### Tl;DR of the proposal:
Read image's [EXIF](https://en.wikipedia.org/wiki/Exif) metadata. If it contains resolution info **as well as** dimension info, and they match, use that info to determine the image's [density corrected size](https://html.spec.whatwg.org/multipage/images.html#density-corrected-intrinsic-width-and-height) by default. Use this to allow delivering scaled images without affecting layout.

### Why?
The main use-case - allow serving lower-resolution images in a transparent way, e.g. from a CDN, like a placeholder or when network conditions are suboptimal. When the server chooses to do that, we want the intrinsic size of the image to remain unaffected - so that changing the image resolution would not have a side-effect on the image's layout.

### Issues with existing solutions
 [content-dpr](https://github.com/eeeps/content-dpr-explainer), which is [implemented in Chrome](https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/client-hints), was achieving exactly this using an HTTP header. However, this approach has so far failed to gain traction with other engines like webkit, as putting HTTP into this is said to be a layering violation - and brings with it known issues with [content negotiation](https://wiki.whatwg.org/wiki/Why_not_conneg).

### Issues with EXIF
To avoid using the network layer, we want to use the existing metadata mechanisms within the images themselves. We've done a lot of [research](https://discourse.wicg.io/t/proposal-exif-image-resolution-auto-and-from-image/4326) on this in WICG, and the main issue was that existing images on the web contain unpredictable/meaningless/junk metadata, and the EXIF standard is old and not really a living ecosystem, so it would hard to add new stuff to it.

### Overview of the proposal
The idea is to use _several_ `EXIF` properties together, namely the dimension and resolution properties, as sort of a "checksum" or "belt and suspenders" for each other to filter out junk, and to treat them as an intrinsic density indicator only if they match. Something like a "strict subset" of `EXIF`.

### details - intrinsic density correction
An image would be said to have valid intrinsic density correction if **all** of the following apply:

1. The image contains all of the following EXIF tags: `XResolution` (0x011a), `YResolution` (0x011b), `ResolutionUnit` (0x0128), `PixelXDimension` (0xa002), `PixelYDimension` (0xa003).
1. The image's `ResolutionUnit` is set to `1` (`Inch`)
1. The image's physical dimensions, when multiplied by the image's EXIF resolution, would result in the image's EXIF dimension.

If the image passes all these tests, the image's `PixelXDimension` and `PixelYDimension` would be used for the image's intrinsic size, instead of the image's physical dimensions.

### Example
For example, a 120x100 image that was scaled down to 60x50, would be considered by the browser to have a 120x100 intrinsic size if its `PixelXDimension` is 120, its `PixelYDimension` is 100, its `XResolution` is 36, its `YResolution` is 36, and its `ResolutionUnit` is `Inch`. If any of these don't apply, the image would be considered to be of 60x50 intrinsic size.

### Other considerations
This touches on the [Image resolution spec](https://www.w3.org/TR/css-images-4/#the-image-resolution), and raises questions about the order of precedence between the image's intrinsic density the srcset/image-set requested density, and the `image-resolution` property. 
This could be handled by setting a clear order of precedence (least important first):
1. `1dppx`
1. Requested density, e.g. `x2` in srcset
1. Intrinsic density (per this proposal)
1. Whatever `image-resolution` says, if it's there 

Thoughts etc.?

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/5025 using your GitHub account

Received on Wednesday, 29 April 2020 20:12:12 UTC