Skip to content

Commit 48eb344

Browse files
fantasaijakearchibald
authored andcommitted
[css-images-3] Bring prose more in line with original spec text, + editorial clean-up. w3c#6038
1 parent 77f23a0 commit 48eb344

File tree

1 file changed

+71
-64
lines changed

1 file changed

+71
-64
lines changed

css-images-3/Overview.bs

Lines changed: 71 additions & 64 deletions
Original file line numberDiff line numberDiff line change
@@ -1751,14 +1751,15 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
17511751
pixelated
17521752
17531753

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.
17561758

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
17591761
that puts it closest to the target size
17601762
and is greater than zero.
1761-
17621763
Scale it to this integer-multiple-size using [=nearest neighbor=],
17631764
then scale it the rest of the way to the target size as for ''smooth''.
17641765

@@ -1773,62 +1774,30 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
17731774
17741775

17751776
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
17841784
and render them as such
1785-
rather than as jagged-looking "giant pixels".
1785+
(rather than as jagged-looking giant pixels”).
17861786

17871787
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;
17891789
lines that were the same thickness in the original image
17901790
might be a pixel thinner or thicker in the scaled image
17911791
depending on where they appear,
17921792
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=].
17941795
17951796

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'',
18291798
this property does not dictate any particular scaling algorithm to be used.
18301799
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,
18321801
switch to nearest-neighbor interpolation in high-load situations,
18331802
and switch to a higher-quality scaling algorithm like Lanczos interpolation
18341803
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
18461815

18471816
18481817
1849-
The image scaled with ''smooth''
1818+
The image scaled 3x with ''smooth''
18501819
18511820

18521821
18531822
1854-
The image scaled with ''pixelated'' or ''crisp-edges''
1823+
The image scaled 3x with ''pixelated''
18551824
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+
18561865
18571866

18581867
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,
18621871
however,
18631872
they'll act differently:
18641873

18651874
18661875
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
18731877
18741878

18751879
@@ -1879,15 +1883,18 @@ Determining How To Scale an Image: the 'image-rendering' property {#the-image-re
18791883

18801884
18811885
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+
18831890
18841891

18851892
The ''pixelated'' version maintains the overall look of simply scaling the pixels up,
18861893
at the cost of slight blurring,
18871894
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,
18891896
at the cost of aliasing artifacts
1890-
making the "pixels" look irregularly sized.
1897+
making the pixels look irregularly sized.
18911898
18921899

18931900
This property previously accepted the values ''optimizeSpeed'' and ''optimizeQuality''.

0 commit comments

Comments
 (0)