@@ -1751,14 +1751,15 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1751
1751
pixelated
1752
1752
1753
1753
1754
- The image is scaled in a way that preserves the pixelated nature of the original as much as possible,
1755
- but allows minor smoothing instead of awkward distortion when necessary.
1754
+ The image is scaled in a way that preserves
1755
+ the pixelation of the original as much as possible,
1756
+ but allows minor smoothing as necessary to avoid distorting the image
1757
+ when the target size is not a clean multiple of the original.
1756
1758
1757
- For each axis,
1758
- independently determine the integer multiple of its natural size
1759
+ For each axis independently ,
1760
+ first determine the integer multiple of its natural size
1759
1761
that puts it closest to the target size
1760
1762
and is greater than zero.
1761
-
1762
1763
Scale it to this integer-multiple-size using [=nearest neighbor=] ,
1763
1764
then scale it the rest of the way to the target size as for ''smooth'' .
1764
1765
@@ -1773,62 +1774,30 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1773
1774
1774
1775
1775
1776
The image is scaled in a way that preserves contrast and edges,
1776
- and which does not smooth colors or introduce blur to the image in the process.
1777
-
1778
- The image may be scaled using [=nearest neighbor=] ,
1779
- but may instead be scaled with a UA-defined algorithm.
1780
- The only requirement is that the algorithm must not blur edges
1781
- or blend colors from the source image;
1782
- but it can, for example,
1783
- intelligently detect diagonal or curved lines
1777
+ and which avoids smoothing colors or introducing blur to the image in the process.
1778
+ This is intended for images such as line drawings.
1779
+
1780
+ The image may be scaled using [=nearest neighbor=]
1781
+ or any other UA-chosen algorithm
1782
+ that does not blur edges or blend colors from the source image.
1783
+ It can, however, detect diagonal or curved lines
1784
1784
and render them as such
1785
- rather than as jagged-looking " giant pixels" .
1785
+ ( rather than as jagged-looking “ giant pixels”) .
1786
1786
1787
1787
Note: If the new size is not an integer multiple of the original size,
1788
- the NN algorithm can introduce significant “aliasing” bugs;
1788
+ the [=nearest neighbor=] algorithm can introduce significant “aliasing” bugs;
1789
1789
lines that were the same thickness in the original image
1790
1790
might be a pixel thinner or thicker in the scaled image
1791
1791
depending on where they appear,
1792
1792
etc.
1793
- For most purposes, ''pixelated'' will produce a more suitable rendering.
1793
+ For most purposes,
1794
+ ''pixelated'' will produce a more suitable rendering than [=nearest neighbor=] .
1794
1795
1795
1796
1796
-
1797
-
1798
- The nearest neighbor (or NN) image scaling algorithm
1799
- treats the source image's pixels as literal rectangles of color
1800
- on the source canvas,
1801
- then colors each destination pixel
1802
- by choosing one point in the pixel's area
1803
- (usually either the center or top-left)
1804
- and using the color of the corresponding point
1805
- on the source canvas.
1806
-
1807
-
1808
-
1809
- When the destination image's size is an integer multiple of the source,
1810
- this results in "big pixels",
1811
- as if you'd merely "zoomed in" to the source image.
1812
- When it's a non-integer multiple,
1813
- it still produces crisp pixels
1814
- entirely out of source-image colors
1815
- (no blending or blurring),
1816
- but can produce "aliasing bugs"
1817
- where the "pixel grid" can appear somewhat irregular.
1818
-
1819
- For example, using NN to scale up an image by x2.5
1820
- will result in each pixel of the source image
1821
- being used for two or three pixels of the destination image,
1822
- in an alternating fashion.
1823
- Scaling an image down to x0.5
1824
- will "skip" every second pixel in the source image.
1825
-
1826
-
1827
-
1828
- Other than parts of ''crisp-edges'' and ''pixelated'' ,
1797
+ Other than the first step of ''pixelated'' ,
1829
1798
this property does not dictate any particular scaling algorithm to be used.
1830
1799
For example, with ''image-rendering: auto'' ,
1831
- a user agent might scale images with bilinear interpolation by default,
1800
+ a user agent could scale images with bilinear interpolation by default,
1832
1801
switch to nearest-neighbor interpolation in high-load situations,
1833
1802
and switch to a higher-quality scaling algorithm like Lanczos interpolation
1834
1803
for static images that aren't moving or changing.
@@ -1846,30 +1815,65 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1846
1815
1847
1816
1848
1817
1849
- The image scaled with ''smooth''
1818
+ The image scaled 3x with ''smooth''
1850
1819
1851
1820
1852
1821
1853
1822
1854
- The image scaled with ''pixelated'' or ''crisp-edges ''
1823
+ The image scaled 3x with ''pixelated''
1855
1824
1825
+
1826
+
1827
+
1828
+
1829
+ The image scaled 3x with ''crisp-edges''
1830
+ interpreted with an edge-preserving algorithm.
1831
+
1832
+ (Interpreting as [=nearest neighbor=] would give
1833
+ the same results as ''pixelated'' in this case.)
1834
+
1835
+
1836
+
1837
+
1838
+ The nearest neighbor (or NN) image scaling algorithm
1839
+ treats the source image's pixels as literal rectangles of color
1840
+ on the source canvas,
1841
+ then colors each destination pixel
1842
+ by choosing one point in the pixel's area
1843
+ (usually either the center or top-left)
1844
+ and using the color of the corresponding point
1845
+ on the source canvas.
1846
+
1847
+
1848
+ When the target size is an integer multiple of the source,
1849
+ this results in “big pixels”,
1850
+ as if you'd merely zoomed in on the source image.
1851
+ When the target size is a non-integer multiple,
1852
+ it still produces crisp pixels
1853
+ entirely out of source-image colors
1854
+ (no blending or blurring),
1855
+ but can produce aliasing quirks
1856
+ where the “pixel grid” can appear somewhat irregular.
1857
+
1858
+ For example, using [=nearest neighbor=] to scale up an image by 2.5x
1859
+ will result in each pixel of the source image
1860
+ being used for two or three pixels of the destination image,
1861
+ in an alternating fashion,
1862
+ while scaling an image down to 0.5x
1863
+ will skip every second pixel in the source image.
1864
+
1856
1865
1857
1866
1858
1867
1859
- At the 3x scaling as in the preceding example,
1860
- ''pixelated'' and ''crisp-edges'' give identical results.
1861
- At scale ratios in- between integer multiples,
1868
+ At 3x scaling as in the preceding example,
1869
+ both ''pixelated'' and pure [=nearest neighbor=] give identical results.
1870
+ At scale ratios between integer multiples,
1862
1871
however,
1863
1872
they'll act differently:
1864
1873
1865
1874
1866
1875
1867
- The same small pixel-art image as before.
1868
-
1869
-
1870
-
1871
-
1872
- The image scaled 2.5x with ''smooth''
1876
+ The same small pixel-art image as before
1873
1877
1874
1878
1875
1879
@@ -1879,15 +1883,18 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
1879
1883
1880
1884
1881
1885
1882
- The image scaled 2.5x with ''crisp-edges''
1886
+
1887
+ The image scaled 2.5x with ''crisp-edges''
1888
+ interpreted as [=nearest neighbor=]
1889
+
1883
1890
1884
1891
1885
1892
The ''pixelated'' version maintains the overall look of simply scaling the pixels up,
1886
1893
at the cost of slight blurring,
1887
1894
though much less blurring than the ''smooth'' scaling gives.
1888
- Meanwhile, ''crisp-edges'' avoids introducing any blurring at all,
1895
+ Meanwhile, [=nearest neighbor=] avoids introducing any blurring at all,
1889
1896
at the cost of aliasing artifacts
1890
- making the " pixels" look irregularly sized.
1897
+ making the “ pixels” look irregularly sized.
1891
1898
1892
1899
1893
1900
This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality'' .
0 commit comments