[css-images-3] Per WG resolution, restore crisp-edges' ability to use a non-NN algorithm. w3c#6038

Author: tabatkins

css-images-3/Overview.bs

@@ -1712,20 +1712,18 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 	<dl dfn-type=value dfn-for=image-rendering>
 		<dt><dfn>auto</dfn>
 		<dd>
-			<p>
-			The scaling algorithm is UA dependent.
+			The scaling algorithm is UA-dependent.
 
 		<dt><dfn>smooth</dfn>
 		<dd>
-			<p>
 			The image should be scaled with an algorithm that maximizes the appearance of the image.
 			In particular, scaling algorithms that "smooth" colors are acceptable,
 			such as bilinear interpolation.
 			This is intended for images such as photos.
 
 		<dt><dfn>high-quality</dfn>
 		<dd>
-			<p>
+
 			Identical to ''image-rendering/smooth'',
 			but with a preference for higher-quality scaling.
 			If system resources are constrained,
@@ -1748,7 +1746,7 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 
 		<dt><dfn>pixelated</dfn>
 		<dd>
-			<p>
+
 			The image is scaled in a way that preserves the pixelated nature of the original as much as possible,
 			but allows minor smoothing instead of awkward distortion when necessary.
 
@@ -1769,31 +1767,66 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
 
 		<dt><dfn caniuse="css-crisp-edges">crisp-edges</dfn>
 		<dd>
-			<p>
+
 			The image is scaled in a way that preserves contrast and edges,
 			and which does not smooth colors or introduce blur to the image in the process.
 
-			The image must be scaled with the <dfn>nearest neighbor</dfn> algorithm:
-			treating the original image's pixel grid as a literal grid of rectangles,
-			scale those to the desired size,
-			then each pixel of the final image
-			takes its color solely from the nearest pixel of the scaled original image.
+			The image <em>may</em> be scaled using [=nearest neighbor=],
+			but may instead be scaled with a UA-defined algorithm.
+			The only requirement is that the algorithm must not blur edges
+			or blend colors from the source image;
+			but it can, for example,
+			intelligently detect diagonal or curved lines
+			and render them as such
+			rather than as jagged-looking "giant pixels".
 
 			Note: If the new size is not an integer multiple of the original size,
 			the NN algorithm can introduce significant “aliasing” bugs;
 			lines that were the same thickness in the original image
 			might be a pixel thinner or thicker in the scaled image
 			depending on where they appear,
 			etc.
+			For most purposes, ''pixelated'' will produce a more suitable rendering.
 	</dl>
 
-	Other than ''crisp-edges''
-	and the portion of ''pixelated'' that acts like ''crisp-edges'',
+	<div algorithm>
+
+		The <dfn>nearest neighbor</dfn> (or NN) image scaling algorithm
+		treats the source image's pixels as literal rectangles of color
+		on the source canvas,
+		then colors each destination pixel
+		by choosing one point in the pixel's area
+		(usually either the center or top-left)
+		and using the color of the corresponding point
+		on the source canvas.
+
+		<div class=note>
+
+			When the destination image's size is an integer multiple of the source,
+			this results in "big pixels",
+			as if you'd merely "zoomed in" to the source image.
+			When it's a non-integer multiple,
+			it still produces crisp pixels
+			entirely out of source-image colors
+			(no blending or blurring),
+			but can produce "aliasing bugs"
+			where the "pixel grid" can appear somewhat irregular.
+
+			For example, using NN to scale up an image by x2.5
+			will result in each pixel of the source image
+			being used for two or three pixels of the destination image,
+			in an alternating fashion.
+			Scaling an image down to x0.5
+			will "skip" every second pixel in the source image.
+		</div>
+	</div>
+
+	Other than parts of ''crisp-edges'' and ''pixelated'',
 	this property does not dictate any particular scaling algorithm to be used.
 	For example, with ''image-rendering: auto'',
 	a user agent might scale images with bilinear interpolation by default,
 	switch to nearest-neighbor interpolation in high-load situations,
-	and switch to a high-quality scaling algorithm like Lanczos interpolation
+	and switch to a higher-quality scaling algorithm like Lanczos interpolation
 	for static images that aren't moving or changing.
 
 	<div class='example'>