Comment #9 on issue 591 by
p....@gmx.at: Exif chunk is at end of WEBP file — Should be in file header for web engine efficiency I guess
https://bugs.chromium.org/p/webp/issues/detail?id=591#c9## 1) Resolution not needed for photo content as responsive images
The browser knows when the hardware resolution is satisfied and fetches the proper image from the image source set. And scales the image. A bit of interpolation happens. But only downscaling, because the browser selects the correct image dimensions with the necessary "interpolation headroom". All fine. No worries.
But it's a WHOLE different world, when you want to present screenshots/screendesigns on websites in "true to size". Where a thin hairline shall really appear as a thin hairline, and not fade away due to wrong interpolation. Or the whole UI shown way too small or too large. And elements shall be crisp. This use case is not yet covered well in any image format that I know of. At best approximations and hand tailored solutions are available. I will explain that further.
## 2) Exif resolution attributes - Thanks I knew those and used them so far
I once created a spreadsheet of resolution support in various image formats (see attached).
Just no CMS that I know of is utilizing the resolution metadata of JPEG / PNG / WebP for the purpose of responsive images as covered in #1.
## 3) Most likely due to the fuzzy nature inherent in the topic of "responsive images"
What is @1x? What is @2x? Most screen design software which have capabilities to export @1x @2x @3x … equate them to 72 144 288 DPI respectively, if they export the resolution into the metadata at all.
That is ofc only an approximation, never really corresponding to an actual hardware screen resolution but rather to "rough density classes".
Because in the 2000s the commonly found resolutions of flatscreen displays and laptop displays were around 90-120 PPI (see attached spreadsheet with screens over the years until now, only for "rough idea", not fact checked, may contains errors, data partially copied, partially self calculated).
Nevertheless for UI rendering purposes that whole range of hardware resolutions needed to be subsumed under an umbrella "standard UI resolution". On the Mac platform as 72 PPI (to be backwards compatible with what was established in the 1980ies Desktop Publishing world) and 96 PPI on the Windows platform (more true then, but also only an approximation).
With the advent of mobile devices and smart TVs we finally had screens with UIs watched at very different viewing distances. So what really counts is the density projected onto our retina in our eyes. So that at typical viewing distance a "16px CSS pixel font" gives the same size impression in the eye of the beholder as any other device which adheres to the usual rulesets. Well explained in:
-
https://en.wikipedia.org/wiki/Retina_display-
https://en.wikipedia.org/wiki/Fovea_centralis#Angular_size_of_foveal_cones .
For app and website UIs to achieve "somehow uniform UI sizes" the device manufacturers need to tell the OS/browser the proper UI/CSS pixel density which is the appropriate ratio of typical viewing distance plus physical pixel density.
Hence PPI in image files is not fit for that purpose. At best an approximation. As such I handled it so far. I tag my image files in the density classes with the convention @1x = 72ppi, @2x = 144ppi, etc. And if a really appropriate standard comes one day I will batch convert from those "conventional density classes" to the real standardized attribute.
A modern image standard in the era of responsive images should provide means for these two different measurement units:
1) Density Class: Values would be @1x, @1.5x, @2x, @3x etc. Use case: A screenshot/screendesign tagged that way is shown "true to size" for the specified "density class". With up/down-scaling in full integers for perfectly crisp images.
2) A absolute physical metrics: Which allows to specify a value pair: viewing distance X shall yield density Y in the eye of the user. (I may not expressed this scientifically, but I hope you get the idea).
Attachments:
Resolution information PPI DPI in metadata of image file formats.pdf 41.8 KB
Screen Size + Resolution aka Pixel Density + Aspect Ratio - Smartphones Tablets Laptops.pdf 79.5 KB