[css3-images] image-rendering property for contrast-preserving image upscaling

Currently when an image (or canvas or video) is presented by the user
agent at a different size from the source dimensions, the choice of
scaling algorithm is left up to the user agent's discretion.  Browsers
tend to attempt to find a balance between speed and quality but
typically use something like bilinear or bicubic scaling to get
something that looks decent for most images.  For some types of images
like pixel art, however, this sort of interpolation produces a poor
effect and a contrast-preserving upscale like nearest-neighbor is a
better choice.  https://bugzilla.mozilla.org/show_bug.cgi?id=423756
has a few examples of authors requesting that bilinear filtering be
disabled for their content in Firefox.  Another example that came up
recently is a GameBoy emulator that renders to a <canvas>.  When the
canvas is scaled up, the author would much prefer a scaling algorithm
that preserved the blocky pixelated effect.
SVG provides an image-rendering property
http://www.w3.org/TR/SVG/painting.html#ImageRenderingProperty that
lets the author provide some hints about how they would like the image
to be scaled.  Mozilla has implemented this as a CSS property with an
extension -moz-crisp-edges to specify nearest-neighbor interpolation:
https://developer.mozilla.org/en/css/image-rendering.  Microsoft has
implemented -ms-interpolation-mode as a CSS property with the values
'bicubic' and 'nearest-neighbor' to provide a similar functionality:
http://msdn.microsoft.com/en-us/library/ff521095(VS.85).aspx.

I propose that CSS adopt something similar to the Mozilla property
with the possible values 'auto' and 'optimize-contrast'.  The property
could apply to images, background-images of any element, HTML5
<video> and HTML5 <canvas> (just like the mozilla version).  A user
agent could use nearest-neighbor or (in theory) a more sophisticated
pixel art scaling algorithm
(http://en.wikipedia.org/wiki/Pixel_art_scaling_algorithms) for
'optimize-contrast' images and their normal scaling algorithms for
'auto' images.  Alternately, we could just say that optimize-contrast
means nearest neighbor and leave it at that since I don't anticipate
that anybody will actually implement any other scaling algorithms.

I don't think we should adopt the optimizeSpeed/optimizeQuality values
as they do not convey author intent about how the image appears but
assume certain performance characteristics about implementations that
are not likely to always be true.  For example, if the image scaling
is being performed on a GPU I do not think there is a significant
performance difference between bilinear and nearest neighbor filtering
- although there is a definite difference in appearance.

- James

Received on Wednesday, 1 December 2010 23:25:59 UTC