The 'image-rendering' property
Background
The 'image-rendering' property was defined in
SVG
1.1 to give a hint as to how an image should be
scaled. Values allowed are:
- auto
-
User agent can use nearest neighbor but bilinear resampling preferred.
- optimizeQuality
-
User agent should employ a resampling algorithm at least as good as bilinear sampling.
- optimizeSpeed
-
User agent should emphasize rendering speed over quality.
SVG 2 adds a condition to auto: For
Conforming High-Quality SVG Viewers, the user agent shall
employ a resampling algorithm at least as good as bilinear
resampling.
SVG 1.1: In all cases, resampling must be done in a
truecolor (e.g., 24-bit) color space even if the original data
and/or the target device is indexed color.
SVG 2: We should add: High quality SVG viewers should perform the
image processing using a linear color space.
CSS Images 3
CSS
Image Values and Replaced Content Module Level 3 has
redefined the 'image-rendering' property with the following
values:
- auto
-
For photos.
- crisp-edges
-
Preserve contrast, for pixel art.
- pixelated
-
Preserve pixelated look.
Tests
Feedback
The spec could use some clarification.
The smooth value should be added.
Jasper's feedback
The specification should focus on what the
"ideal" image should look like:
- pixelated
-
the ideal is simply the pixelated version of the given
image (pixel art, QR codes, etc.)
- crisp-edges
-
the given image is a (point) sampled version of the
original/ideal (?), which has (mostly) smooth contours,
but need not be smooth across edges (cartoons, possibly
some photographs)
- smooth
-
the image is assumed to be a sampled version of a (mostly)
smooth (contours/values/derivatives) ideal (some
photographs, but definitely images of complex gradients
and so on), it might even make sense to go so far as to
say that the ideal is band-limited (making it essentially
uniquely defined)
- auto
-
the image is assumed to be a sampled version of an ideal
for which we know nothing (a priori), other than that it
is an image of which the given image is a sampled version
(like many photographs)
The UA's job is then to give as high quality an
approximation to the hypothetical "ideal", given the
corresponding assumptions and any practical considerations
it might have (like speed). The idea behind this is that it:
- Better conveys the author's intent.
- Gives more explicit /goals/.
- Allows for more freedom in actually interpreting the values on the
client (without sacrificing the author's intent).
For example, a UA might choose to implement "pixelated" using
nearest-neighbour for upsampling and bicubic for downsampling, use a box
filter across the board, use a least-squares approximation of a box
filter, or any number of other schemes. As long as it approximates the
"ideal" pixelated version of the given image.
Krzysztof's Feedback
A picture is worth a thousand words.
Rotated pixels?
- pixelated
-
- crisp-edges
-
Comments
-
Existing content exploited 'optimizeSpeed' to preserve
pixelated look (Batik, Opera, and Firefox used nearest
neighbor). Inkscape 0.91 (beta) uses 'optimizeSpeed' for
pixelated. Can 'optimizeSpeed' be aliased to
'pixelated'.
-
Filter effects still refers to SVG 1.1 values.