Skip to content

Commit 413479b

Browse files
svgeesussvgeesus
committed
[ImpRpt] Beef up the Exif section, following AC review
1 parent cb487c3 commit 413479b

File tree

3 files changed

+119
-14
lines changed

3 files changed

+119
-14
lines changed

‎Implementation_Report_3e/img/Gimp-Exif-viewer.png‎

257 KB
Loading

‎Implementation_Report_3e/img/auto-orient.png‎

99.1 KB
Loading

‎Implementation_Report_3e/index.html‎

Lines changed: 119 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -957,27 +957,101 @@ <h2>7. Exchangeable Image File (Exif)</h2>
957957
<p>
958958
Widely used in other image formats such as JPEG/JFIF,
959959
EXIF metadata is also available in PNG.
960-
PNG Third Edition moves the <code>eXIf</code> chunk,
960+
PNG Third Edition moves the definition of the <code>eXIf</code> chunk,
961961
which was already in the <a href="https://w3c.github.io/PNG-spec/extensions/Overview.html">PNG Extensions document</a>,
962962
into the <a href="https://w3c.github.io/PNG-spec/#eXIf">main specification</a>.
963963
</p>
964+
<h3>Passive metadata</h3>
964965
<p>
965-
Exif mostly contains metadata (copyright, lens focal length)
966-
which does not affect the display of the image.
966+
Exif mostly contains passive metadata
967+
(such as copyright, lens focal length, image creation time)
968+
which does not affect the display of the image.
969+
It is useful to be able to store this in PNG,
970+
in the same way that it is stored in other image formats such as JPEG or TIFF.
971+
This enables a common workflow for image metadata handling,
972+
regardless of image format.
967973
</p>
974+
<figure>
975+
<img src="./img/Gimp-Exif-viewer.png" alt="">
976+
<figcaption>GNU Image Manipulation Program (GIMP), displaying Exif metadata</figcaption>
977+
</figure>
978+
<p>
979+
<a href="https://exiftool.org/"><strong>ExifTool</strong>, by Phil Harvey</a>
980+
supports <a href="https://exiftool.org/TagNames/PNG.html">reading
981+
and writing PNG metadata</a>, including
982+
<a href="https://exiftool.org/TagNames/Exif.html">Exif</a>.
983+
</p>
984+
<p>
985+
The <a href="https://pillow.readthedocs.io/en/stable/"><strong>Python Imaging Library</strong>,
986+
Pillow</a> supports reading and writing
987+
<a href="https://pillow.readthedocs.io/en/latest/handbook/image-file-formats.html#png">Exif in PNG</a>
988+
</p>
989+
<p>
990+
<a href="https://exiv2.org/"><strong>Exiv2</strong></a>,
991+
a C++ imaging library, supports both
992+
<a href="https://dev.exiv2.org/projects/exiv2/wiki/Supported_image_formats">reading and writing Exif in PNG</a>
993+
</p>
994+
995+
<h3>Display-affecting metadata</h3>
996+
997+
<p>
998+
A couple of items in Exif can affect image display,
999+
and the <em>image orientation</em> is one example.
1000+
Notably, direct printing from a camera uses Exif orientation.
1001+
However, the detected orientation can easily be incorrect
1002+
if the camera is tilted away from the horizontal.
1003+
</p>
1004+
1005+
<p>
1006+
Removing metadata is a common technique when images are prepared for the web.
1007+
Usually the aim is to reduce filesize,
1008+
but in the case of Exif which can contain thumbnails,
1009+
which are often not updated by image editors,
1010+
it can also be a privacy-protecting feature.
1011+
</p>
1012+
1013+
<p>
1014+
An online image 0ptimization tool,
1015+
<a href="https://www.freeconvert.com/png-converter"><strong>PNG Converter</strong></a>,
1016+
optionally strips metadata to reduce filesize.
1017+
To avoid changing the orientation,
1018+
it can also rotate the image data
1019+
based on Exif orientation.
1020+
</p>
1021+
1022+
<figure>
1023+
<img src="./img/auto-orient.png" alt="">
1024+
<figcaption>Auto Orient and Strip Metadata options in PNG Converter</figcaption>
1025+
</figure>
1026+
1027+
<figure>
1028+
<img src="./img/Gimp-PNG-import-rotate-Exif.png" alt="">
1029+
<figcaption>GNU Image Manipulation Program (GIMP), showing optional image rotate when opening a PNG image</figcaption>
1030+
</figure>
1031+
9681032
<p>
969-
The Web Platform places a constraint on Exif image metadata that affects layout, such as image orientation:
970-
it is required to be placed <em>before the image data</em>.
971-
PNG Third Edition enforces that constraint, for Exif in PNG.
1033+
The Web Platform places a constraint on Exif image metadata that affects layout,
1034+
such as image orientation:
1035+
it is <a href="https://drafts.csswg.org/css-images-3/#url-metadata">required</a>
1036+
to be placed <em>before the image data</em>.
1037+
PNG Third Edition <em>enforces</em> that constraint, for Exif in PNG.
9721038
</p>
9731039
<p>
974-
Respecting Exif image orientation for PNG images in CSS is implemented in <strong>WebKit-based browsers</strong>.
1040+
Respecting Exif image-orientation for PNG images
1041+
in CSS (with <code>image-orientation</code>)
1042+
is implemented in <strong>WebKit-based browsers</strong>.
9751043
</p>
9761044
<p>
977-
Respecting Exif image orientation for PNG images in Canvas 2D is implemented in <strong>WebKit-based browsers</strong> and <strong>Blink-based browsers</strong>.
1045+
Respecting Exif image orientation for PNG images
1046+
in Canvas 2D is implemented in <strong>WebKit-based browsers</strong>
1047+
and <strong>Blink-based browsers</strong>.
9781048
</p>
9791049
<p>
980-
<strong>Blink-based browsers</strong> (Google Chrome, Microsoft Edge, Samsung Internet, etc), and <strong>Mozilla Firefox</strong> implement Exif orientation in CSS for JPEG/JFIF images, and are expected to implement it for PNG as well.
1050+
<strong>Blink-based browsers</strong> (Google Chrome,
1051+
Microsoft Edge, Samsung Internet, etc),
1052+
and <strong>Mozilla Firefox</strong> implement Exif orientation
1053+
in CSS for JPEG/JFIF images,
1054+
and are expected to implement it for PNG as well.
9811055
(<a href="https://issues.chromium.org/issues/40125224">Chrome bug</a> and <a href="https://bugzilla.mozilla.org/show_bug.cgi?id=1682759">Firefox bug</a>).
9821056
</p>
9831057

@@ -1001,6 +1075,19 @@ <h3>Exif in Canvas 2D tests (PNG)</h3>
10011075
<td class="result passes-all"></td>
10021076
</tr>
10031077
</table>
1078+
</section>
1079+
1080+
<p>
1081+
<a href="https://www.w3.org/TR/css-images-3/">CSS Images 3</a> defines
1082+
a property,
1083+
<a href="https://www.w3.org/TR/css-images-3/#the-image-orientation"><code>image-orientation</code></a>
1084+
solely to override incorrect orientation information
1085+
which was automatically added by a camera or scanner.
1086+
This property is <strong>optional to implement</strong>,
1087+
making it hard to test.
1088+
</p>
1089+
1090+
<section class="tests" id="image-orientation"></section>
10041091
<h3>Exif in CSS tests (JPEG)</h3>
10051092
<table>
10061093
<tr class="header">
@@ -1017,8 +1104,8 @@ <h3>Exif in CSS tests (JPEG)</h3>
10171104
<td class="result passes-all"></td>
10181105
<td class="result passes-all"></td>
10191106
</tr>
1020-
</table>
1021-
<table>
1107+
<!-- </table>
1108+
<table> -->
10221109
<tr class="header">
10231110
<th><a href="https://wpt.fyi/results/css/css-images/image-orientation/image-orientation-from-image-embedded-content.html?label=experimental&label=master&aligned">Live Results</a></th>
10241111
<th>Chrome 137</th>
@@ -1066,13 +1153,31 @@ <h3>Exif in CSS tests (PNG)</h3>
10661153
<td class="result passes-unclear"></td>
10671154
<td class="result passes-unclear"></td>
10681155
<td class="result passes-unclear"></td>
1069-
<td class="result passes-all"></td>
1156+
<td class="result passes-unclear"></td>
10701157
</tr>
10711158
</table>
10721159

1073-
<p id="wooly">Note that CSS Images 3
1160+
<p id="wooly">1. Note that CSS Images 3
10741161
<a href="https://drafts.csswg.org/css-images-3/#url-metadata">makes
1075-
this hard to test</a> for the CSS `image-orientation` property.</p>
1162+
this hard to test</a> for the CSS <code>image-orientation</code> property,
1163+
if the metadata occurs after the image data.
1164+
</p>
1165+
<p>The correct rendering for the <code>image-orientation</code> CSS tests
1166+
depends on the resolution of several CSS Images 3 issues:</p>
1167+
<ul>
1168+
<li><a href="https://github.com/w3c/csswg-drafts/issues/5173">Images on the web</a></li>
1169+
<li><a href="https://github.com/w3c/csswg-drafts/issues/4165">Should CSS decorative images respect EXIF-orientation by default</a></li>
1170+
<li><a href="https://github.com/w3c/csswg-drafts/issues/4666">image-orientation and canvas drawImage</a></li>
1171+
<li><a href="https://github.com/w3c/csswg-drafts/issues/11114">Should EXIF
1172+
image orientation data be ignored if it comes after the image data in the encoded image?</a></li>
1173+
<li><a href="https://github.com/web-platform-tests/wpt/issues/18549">Write Tests for Image-Orientation Initial Value</a></li>
1174+
</ul>
1175+
<p>
1176+
Results for those tests are, nevertheless,
1177+
reported here as an indication of the current
1178+
implementation status.
1179+
</p>
1180+
10761181
</section>
10771182

10781183
<section id="palette">

0 commit comments

Comments
 (0)