Re: [css-images] Gamma errors in image downscaling

On Sun, Nov 9, 2014 at 12:06 PM, Tavmjong Bah <> wrote:

> On Sun, 2014-11-09 at 14:15 -0500, Lea Verou wrote:
> > A colleague brought this [1] to my attention, which seems to
> > demonstrate an image scaling bug in pretty much every browser I tried
> > the testcase [2] on. Furthermore, the results across UAs are
> > inconsistent, which might indicate a standardization opportunity. I,
> > myself, have noticed similar errors when scaling down certain patterns
> > in the past, so stumbling on these issues is not that rare.
> > Applying different values to the image-rendering property seems to
> > affect the results, but no value produces a correctly downscaled image
> > (including the various properietary values…).
> >
> >
> > Shouldn’t image-rendering: crisp-edges fix this? Is there any spec
> > violation here at all, or is that part of image scaling undefined? Any
> > thoughts?
> This has to do with using the srgb color space to do scaling. Scaling
> should be done in a linear color space. 'crisp-edges' does not fix this
> as it doesn't specify which color space to use.
> We briefly discussed this at the joint CSS/SVG meeting at TPAC last week
> although this part doesn't seem to be minuted. (I showed the bottom of
> [3] at the meeting.) High quality image processing software (Photoshop,

That is not correct. PS doesn't switch colorspaces or adjust for gamma when
it downsamples images.
You can set up your own workflow that includes linearizing the pixels to
achieve the effect.

> Gimp, etc.) has already moved to linear colors spaces, the web should
> follow as resources permit.

I wonder if this is big enough of a issue. The problem is only noticeable
if there are sharp transitions in luminosity over a large area which is not
that common in most images.
Some searching on the internet just point to the article that you linked to.

> At the moment there is no CSS property to hint that a linear color space
> should be used for scaling (actually, a linear color space should always
> be used so a property should not be needed). SVG does have the
> 'color-interpolation' property value 'linearRGB' to indicate
> interpolation (as in gradients, animations, and alpha compositing)
> should be done in a linear color space but nobody, that I know of,
> implements it. (The SVG 'color-interpolation-filters' property value
> 'linearRGB' is widely implemented as this is the default value for
> filters.)
> Tav
> > [1]:
> > [2]:
> [3]

Received on Monday, 10 November 2014 19:39:45 UTC