Gamma error in picture scaling

http://www.ericbrasseur.org/gamma.html

by rubatuga • 8 years ago

55 33 8 years ago

ericbrasseur.org

AstralStorm3• 8 years ago

Ah yes, linear light scaling. Implemented in Kodi and MPV since times immemorial... in Imagemagick too. Like 10 years.

It also improves scaling quality for most resampling algorithms.

pfranz2• 8 years ago

I'm not an expert, but I've dealt with my share of this working in film. Color problems in image processing are everywhere. Pre-multiplication and Alpha channels are another huge one. A lot of professionals don't even understand it and will brute-force compensate for problems instead of understanding the problem. Here's a posting from this week [1] from professionals who care about getting this stuff right trying to convert a tiff to jpeg without surprise colors shifts.

A summary is that you need to do almost all image modifications in a linear color space. So you first need to back out any color tweaks made (for aesthetic or technical reasons), modify the image, then re-apply any tweaks.

Unfortunately, image files often aren't tagged with their color space and might use a specific color space out of convention--but they could use something else. Also, because it's way harder to do the right thing, a lot of software just does the modifications ignoring color space. Just think about how much slower and more memory a web page full of thumbnails would take to draw if you added in color space transformations? For awhile, a lot of browsers added support but left them off by default (imagine if you designed your web page to look right in a broken color space and it was suddenly much slower and now looked wrong). But a lot of software is slowly catching up. Unfortunately, legacy software (like Photoshop) and legacy file formats might never change.

[1] http://lists.openimageio.org/pipermail/oiio-dev-openimageio....

mark-r9• 8 years ago

You could do a rough approximation of gamma correction with squares and square roots, which wouldn't add to the processing time like a full sRGB conversion would.

mark-r9• 8 years ago

I had this idea a long time ago but never actually tested it. Now I have: http://marksblog.com/gamma-resize/. The square/sqrt method gets at least 80% of the quality but should be quick to compute on a modern processor.

burfog3• 8 years ago

Going from 8-bit sRGB channels to 32-bit IEEE float channels is a simple lookup in a table with 256 values.

Going the other way is only slightly harder. Scale to the range 0 ... 4095, properly round the float to an integer, verify the range or mask with 0xfff to protect against NaN and Inf, and then to a table lookup in a table with 4096 values.

Tux Paint contains GPL code for it. It's been there for more than a decade. All you GIMP and Photoshop users having trouble with this should have been using Tux Paint. :-)

lstamour2• 8 years ago

I first saw this post in 2009 or so, and it was eye-opening. I found it while googling for why colours shifted when I resized images, as back then there wasn't much awareness of this issue. But it's much less prevalent now. Related -- scaling algorithms: https://en.wikipedia.org/wiki/Image_scaling#Algorithms

You don't often find browsers disagreeing in 2019 on how to render things, but image colour -- even on the same MacOS (retina) platform -- appear to be one of those things they disagree on still: https://content.screencast.com/users/LouisStAmour/folders/Sn... Safari on the left, Firefox in the middle and Chrome on the right. So you can try it for yourself, the test page is at http://www.ericbrasseur.org/gamma_dalai_lama.html

If this isn't esoteric enough, I know of at least one major broadcast media company (Bell's crave.ca) that doesn't properly encode their HDTV 720p videos in MP4 to flag to the browser they're in Rec 709 colour space, and so the compression artifacts, designed to be invisible in Rec 709 are extremely visible on a wide gamut P3 display.

Of course, these flags were only recently respected on all platforms. Chrome on Windows as of Oct 2016: https://bugs.chromium.org/p/chromium/issues/detail?id=655417... and Firefox (err, actually still not fixed, it depends on the codec...) https://bugzilla.mozilla.org/show_bug.cgi?id=1300170#c87

But colour space is increasingly something you have to pay attention to, as displays improve beyond sRGB -- yet ironically, it's also getting easier to ignore as the latest stepping stone towards Rec 2020, the DCI-P3 colour space, is shared between PC and movie industries. https://en.wikipedia.org/wiki/DCI-P3#2015-2016 (Personally I refuse to buy any display or device that plays back video if it doesn't have a P3 display, ideally OLED)

FYI, you can test for colour gamut device support with CSS to serve wide-gamut colours -- but oddly enough, again, no Firefox support. :( https://developer.mozilla.org/en-US/docs/Web/CSS/@media/colo... FF bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1422237

jacobolus2• 8 years ago

back then [in 2009] there wasn't much awareness of this issue

I haven’t noticed too much change in the general awareness of this problem between the 1990s and today.

Experts have always known the right thing to do and people have been talking about these problems as long as there has been image processing, (e.g. Poynton’s Gamma FAQ dates from sometime before 1998 http://poynton.ca/notes/colour_and_gamma/GammaFAQ.html) but it’s new to everyone at some point, and newcomers perennially screw up.

The annoying thing is that there are folks who continue to screw up (like Adobe Photoshop) who should really know better. Backwards compatibility shouldn’t be an excuse to continue with broken implementations for decades.

ZenPsycho• 8 years ago

FYI You can get gamma correct resizing (and other operations) in recent versions of photoshop by first switching the image to 32-bit colour depth mode.

pfranz2• 8 years ago

I had a really long reply typed up with some specific workflow problems. But you can see people complain elsewhere in this thread about how Adobe handles stuff like this.

The basic problem is that the color space for blending is an application setting (can't be specified in the file) and higher bit depths will double or triple your file size.

sometime• 8 years ago

The same phenomenon also applies to color blending. In a modern context this phenomenon is especially visible in UI elements that blur the background: Up until recently many UIs did not get the blurring right, resulting in greyish dark spots between different colors. I think CSS blurring in most browsers still gets it wrong.

https://www.youtube.com/watch?v=LKnqECcg6Gw (Computer Color is Broken, MinutePhysics)

zokier• 8 years ago

Well color blending is whole another can of worms; there are no easy answers there. Mixing RGB values even in linear space does not yield always "correct" results. More problematic, I'm not sure if there is even well-defined correct result for generalized color mixing/blending.

mark-r9• 8 years ago

Even something as simple as a proper gradient between two colors is surprisingly difficult. I think I finally cracked that one though: https://stackoverflow.com/a/49321304/5987

Color mixing is easy if you're mixing light, just add together the linear intensities. Color mixing of pigments is a different order of complexity, because you have to consider that pigments are both transmissive and reflective and there are other effects like dot gain and spectral lines to consider.

nayuki• 8 years ago

mark-r9• 8 years ago

This is over 10 years old, and I just tested 3 browsers - NONE of them got it right!

For image editing at home I use my own software to do resizing, using Lanczos-5 in linear color space.

e19293001• 8 years ago

Could you please provide a good reference for implementing Lanczos-5?

mark-r9• 8 years ago

Sorry, I don't know of one. You could start with the Wikipedia description at https://en.wikipedia.org/wiki/Lanczos_resampling but that is nowhere near enough detail to do an actual implementation. You might try searching for a Lanczos-2 or Lanczos-3 implementation.

I wrote my first image resizer in 1986, so I've been immersed in this for a long time. I'm considering writing a blog post to go into the finer points, but my blog is kind of empty right now and has been for a long time - don't get your hopes up.

datenwolf2• 8 years ago

Browsers do wrong a lot of things. Some time ago I hacked this little test:

https://datenwolf.net/rndrchk/

EDIT: If everything is done correctly, the text in the upper div will remain unreadable.

If browsers were doing gamma correct scaling, the perceived brightness of the checker pattern would not change.

Even more problematic, when zooming the interpolation and blending also don't happen gamma correct. If mere nearest neighbor interpolation were applied, this would remain hidden.

This becomes really annoying on HiDPI screens. For some reason the "px" CSS unit has been "redefined" as an "average-ish" angular distance when viewed on a 96DPI screen at an arm's length or so. And for higher resolutions px is scaled accordingly. Whoever came up with that nonsense created a lot of issues down the road. sigh

EDIT: Also Opera (before it switched to WebKit) did some really funky business at the edges, when upscaling images. Interpolation would always clamp-to-edge instead of respecting the tiling mode.

zamadatix2• 8 years ago

Regardless if they had included the device relative px in the spec or not CSS doesn't define rendering, it defines layout. I.e. it's intentional CSS doesn't allow you to define things in terms of physical device pixels. Technically you could hack it for real world devices with ton of media queries but that's not their intended usage (hence needing a ton).

If you're intending to render something in the browser (calculating DOM elements, canvas, or anything else) they expect you to handle it in your rendering code (JS/WASM).

kazinator2• 8 years ago

I'm playing with the Dalai Lama picture in Gimp and seeing some interesting results.

If you decompose the image into LAB, then the individual channels exhibit this scaling issue.

But the kicker here is that when you're working with these decomposed channels, they are visualized in the GUI as grayscale.

So, thus, never mind the fact that they represent color; that is irrelevant. Color seems to be a "gray herring" here.

What's fascinating is that the eyes are not fooled; optical blurring and scaling is resilient somehow.

So it really is just about the intensity mapping, underscoring how this is a gamma issue.

The data is contrived so that a linear treatment of the intensities will average out to around zero.

This reminds me of say, the wrongness of mixing logarithmically compressed audio samples just by adding them together.

kazinator2• 8 years ago

What if an image is so contrived that the correctly linearized data averages into a flat, gray signal?

Won't the "correct" scaler succumb to the problem?

The answer is no. Here is why: such a contrived image will actually look gray, and so when it scales to a gray square, that is arguably correct.

We can see this with the Dalai Lama readily. If apply even a modest gamma curve to it to bring up its midtones, it turns more or less gray.

Gamma error in picture scaling

Related Stories