@@ -1712,20 +1712,18 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1712
1712
1713
1713
auto
1714
1714
1715
-
1716
- The scaling algorithm is UA dependent.
1715
+ The scaling algorithm is UA-dependent.
1717
1716
1718
1717
smooth
1719
1718
1720
-
1721
1719
The image should be scaled with an algorithm that maximizes the appearance of the image.
1722
1720
In particular, scaling algorithms that "smooth" colors are acceptable,
1723
1721
such as bilinear interpolation.
1724
1722
This is intended for images such as photos.
1725
1723
1726
1724
high-quality
1727
1725
1728
-
1726
+
1729
1727
Identical to ''image-rendering/smooth'' ,
1730
1728
but with a preference for higher-quality scaling.
1731
1729
If system resources are constrained,
@@ -1748,7 +1746,7 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1748
1746
1749
1747
pixelated
1750
1748
1751
-
1749
+
1752
1750
The image is scaled in a way that preserves the pixelated nature of the original as much as possible,
1753
1751
but allows minor smoothing instead of awkward distortion when necessary.
1754
1752
@@ -1769,31 +1767,66 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1769
1767
1770
1768
crisp-edges
1771
1769
1772
-
1770
+
1773
1771
The image is scaled in a way that preserves contrast and edges,
1774
1772
and which does not smooth colors or introduce blur to the image in the process.
1775
1773
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".
1781
1782
1782
1783
Note: If the new size is not an integer multiple of the original size,
1783
1784
the NN algorithm can introduce significant “aliasing” bugs;
1784
1785
lines that were the same thickness in the original image
1785
1786
might be a pixel thinner or thicker in the scaled image
1786
1787
depending on where they appear,
1787
1788
etc.
1789
+ For most purposes, ''pixelated'' will produce a more suitable rendering.
1788
1790
1789
1791
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'' ,
1792
1825
this property does not dictate any particular scaling algorithm to be used.
1793
1826
For example, with ''image-rendering: auto'' ,
1794
1827
a user agent might scale images with bilinear interpolation by default,
1795
1828
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
1797
1830
for static images that aren't moving or changing.
1798
1831
1799
1832
0 commit comments