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

'image-rendering' Scaling Test Auto optimizeSpeed optimizeQuality crisp-edges pixelated Original image
'image-rendering' Scaling Test Auto optimizeSpeed optimizeQuality crisp-edges pixelated Original image

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:

  1. Better conveys the author's intent.
  2. Gives more explicit /goals/.
  3. 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
2x2 rotated square pattern showing nearest neighbor rendering.
crisp-edges
2x2 rotated square pattern showing nearest aliased rendering.
2x2 rotated square pattern showing nearest aliased rendering.

Need to be able to turn off anti-aliasing where color means something.

Comments