[css-images-3][css-images-4] Per CSSWG resolution, layout-affecting metadata occuring after the image data should be ignored.

Author: tabatkins

css-images-3/Overview.bs

@@ -210,6 +210,36 @@ Image References: the ''url()'' notation {#url-notation}
 		it's interpreted as an image.
 	</div>
 
+### Image Metadata ### {#url-metadata}
+
+Images can contain metadata
+such as resolution and orientation
+which specifies how to render the image.
+Some image formats are flexible in where this metadata can be placed in the file;
+however, if the metadata occurs <em>after</em> the bulk of the actual image data,
+it harms the UA's ability to “progressively decode” the image
+and display it as the image's data streams in.
+
+To reduce the impact of this issue:
+
+* Authors <em>must</em> produce their image files
+	so that such metadata occurs first in the image file.
+	(Note: This is the default for most images already.)
+* User agents <em>should</em> ignore any layout-impacting metadata (such as orientation or resolution)
+	that occurs after the actual image data begins in the file.
+	(Note: This rule does not impact metadata that does not affect layout,
+	such as color space information.)
+
+	If a user agent cannot ignore the metadata based its location in the file
+	(for example, if the decoder being used
+	does not report where in the file the metadata was located),
+	it <em>must</em> use the metadata in all cases.
+	(In particular, it is not valid
+	to use the metadata only when the image is "small"
+	and the entire file is downloaded quickly,
+	but to ignore it if the image is large
+	and the metadata isn't downloaded until well after the image starts being displayed.)
+
 
 <!--
  ██████   ████████     ███    ████████  ████ ████████ ██    ██ ████████  ██████
@@ -1565,6 +1595,8 @@ Image Processing {#image-processing}
 			If there is no orientation specified in its metadata,
 			this value computes to ''image-orientation/none''.
 
+			Note: [[#url-metadata]] imposes some restrictions on what metadata can be used.
+
 		<dt><dfn lt="<angle>|flip|<angle> || flip"><<angle>> || flip</dfn>
 		<dd>
 			Positive <<angle>> values cause the image to be rotated to the right

css-images-4/Overview.bs

@@ -1955,6 +1955,8 @@ Overriding Image Resolutions: the 'image-resolution' property {#the-image-resolu
 			the explicitly specified resolution is used (if given),
 			else it defaults to ''1dppx''.
 
+			Note: [[css-images-3#url-metadata]] imposes some restrictions on what metadata can be used.
+
 		<dt><dfn>snap</dfn>
 		<dd>
 			If the "snap" keyword is provided,