Skip to content

Commit 5dfb6d1

Browse files
committed
[css-images-3] Per WG resolution, restore crisp-edges' ability to use a non-NN algorithm. #6038
1 parent e0ef5ff commit 5dfb6d1

File tree

1 file changed

+47
-14
lines changed

1 file changed

+47
-14
lines changed

css-images-3/Overview.bs

Lines changed: 47 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1712,20 +1712,18 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
17121712
17131713
auto
17141714
1715-

1716-
The scaling algorithm is UA dependent.
1715+
The scaling algorithm is UA-dependent.
17171716

17181717
smooth
17191718
1720-

17211719
The image should be scaled with an algorithm that maximizes the appearance of the image.
17221720
In particular, scaling algorithms that "smooth" colors are acceptable,
17231721
such as bilinear interpolation.
17241722
This is intended for images such as photos.
17251723

17261724
high-quality
17271725
1728-

1726+
17291727
Identical to ''image-rendering/smooth'',
17301728
but with a preference for higher-quality scaling.
17311729
If system resources are constrained,
@@ -1748,7 +1746,7 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
17481746

17491747
pixelated
17501748
1751-

1749+
17521750
The image is scaled in a way that preserves the pixelated nature of the original as much as possible,
17531751
but allows minor smoothing instead of awkward distortion when necessary.
17541752

@@ -1769,31 +1767,66 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
17691767

17701768
crisp-edges
17711769
1772-

1770+
17731771
The image is scaled in a way that preserves contrast and edges,
17741772
and which does not smooth colors or introduce blur to the image in the process.
17751773

1776-
The image must be scaled with the nearest neighbor algorithm:
1777-
treating the original image's pixel grid as a literal grid of rectangles,
1778-
scale those to the desired size,
1779-
then each pixel of the final image
1780-
takes its color solely from the nearest pixel of the scaled original image.
1774+
The image may be scaled using [=nearest neighbor=],
1775+
but may instead be scaled with a UA-defined algorithm.
1776+
The only requirement is that the algorithm must not blur edges
1777+
or blend colors from the source image;
1778+
but it can, for example,
1779+
intelligently detect diagonal or curved lines
1780+
and render them as such
1781+
rather than as jagged-looking "giant pixels".
17811782

17821783
Note: If the new size is not an integer multiple of the original size,
17831784
the NN algorithm can introduce significant “aliasing” bugs;
17841785
lines that were the same thickness in the original image
17851786
might be a pixel thinner or thicker in the scaled image
17861787
depending on where they appear,
17871788
etc.
1789+
For most purposes, ''pixelated'' will produce a more suitable rendering.
17881790
17891791

1790-
Other than ''crisp-edges''
1791-
and the portion of ''pixelated'' that acts like ''crisp-edges'',
1792+
1793+
1794+
The nearest neighbor (or NN) image scaling algorithm
1795+
treats the source image's pixels as literal rectangles of color
1796+
on the source canvas,
1797+
then colors each destination pixel
1798+
by choosing one point in the pixel's area
1799+
(usually either the center or top-left)
1800+
and using the color of the corresponding point
1801+
on the source canvas.
1802+
1803+
1804+
1805+
When the destination image's size is an integer multiple of the source,
1806+
this results in "big pixels",
1807+
as if you'd merely "zoomed in" to the source image.
1808+
When it's a non-integer multiple,
1809+
it still produces crisp pixels
1810+
entirely out of source-image colors
1811+
(no blending or blurring),
1812+
but can produce "aliasing bugs"
1813+
where the "pixel grid" can appear somewhat irregular.
1814+
1815+
For example, using NN to scale up an image by x2.5
1816+
will result in each pixel of the source image
1817+
being used for two or three pixels of the destination image,
1818+
in an alternating fashion.
1819+
Scaling an image down to x0.5
1820+
will "skip" every second pixel in the source image.
1821+
1822+
1823+
1824+
Other than parts of ''crisp-edges'' and ''pixelated'',
17921825
this property does not dictate any particular scaling algorithm to be used.
17931826
For example, with ''image-rendering: auto'',
17941827
a user agent might scale images with bilinear interpolation by default,
17951828
switch to nearest-neighbor interpolation in high-load situations,
1796-
and switch to a high-quality scaling algorithm like Lanczos interpolation
1829+
and switch to a higher-quality scaling algorithm like Lanczos interpolation
17971830
for static images that aren't moving or changing.
17981831

17991832

0 commit comments

Comments
 (0)