24-bit color sucks
tiamat.tsotech.com
tiamat.tsotech.com
[1] For a reasonable graphic example http://en.wikipedia.org/wiki/File:CIExy1931_srgb_gamut.png where grey is the entire visible spectrum and the coloured areas are the standard RGB colour space.
http://i.imgur.com/9xeDT.png?1
It's quite obvious that for a gradient from 0x33 to 0x66 (one component), there are simply not enough distinct values to prevent banding. In this case, the range is 51 different values, for a gradient that's maybe spanning 500-1000 pixels. It really looks quite terrible.
I was simply attempting to say "thank you" to Apple for innovating with high-DPI displays so that I could follow that by saying more or less what you did: many things remain to address image clarity.
Just because you can do animation doesn't mean you should.
Also, it slowed site scrolling to a crawl on this reasonably beefy desktop machine.
I'm not a designer; just someone who enjoyed playing with SVG and SMIL to make a subtle background effect that I liked.
You can turn off the animation with the menu at the bottom right. Apologies to everyone for burning your CPU cycles so needlessly. Just turn it off if you don't like it.
This is a fallacy. That the human eye cannot distinguish N different colours does not imply that a given colour space of >N colours contains every colour that the human eye can distinguish.
To give an equivalent example that is easier to understand, consider a colour space with 16.7 million shades of red. 16.7 million colours is more than the human eye can distinguish, but there are clearly many colours that the human eye can distinguish that are not in that colour space (notably shades of green, shades of blue, and combinations of red, green, and blue).
My vision for the future? Specifications that fully exceed the human capacity for discernibility.
2880x1800? Nope, I can still see aliasing (particularly in Terminal when I'm coding).
IPS? Nope. Move your head slightly up and down and -- while the chromaticity stays (roughly) the same -- the luminance does not.
Black levels? I can still distinguish a black screen from the bezel, so it needs some work too.
Color depth? See the provided banding examples. Not to mention that the three primaries in most LCD panels form a very small triangle in the chromaticity diagram.
Refresh rates also stink. It's 2012 -- motion should be so fluid it looks real by now.
Anyway, there's a lot of potential for improvement but I'm afraid if you're not OCD (like me) or a color scientist, most people just don't care too much.
To be fair, this sort of applies to retina displays as well: The hardware put into some of the Retina macs can barely handle the bandwidth demands of realtime rendering at such high resolutions. Until that problem is addressed, you certainly shouldn't be running around demanding >8bpc color precision.
Dithering for gradients could certainly make a minor difference in rendered quality, but I don't think most browser vendors are interested in making rendering performance slower right now - they're quite busy trying to make it faster. As evidenced by the fact that the OP's site runs like complete garbage in even modern browsers. Even if you spend the cycles and the power to dither, you're basically approximating something like another bit of precision. Is it really worth the cost just for another bit? You could support the argument for dithering by showing a side by side comparison, at least.
Contrast this with other posters who I presume don't have dithering, and write comments like "this gradient looks ugly"...
Modern GPUs are certainly capable of high-precision arithmetic but it is not a safe assumption that all the hardware is designed for it. A lot of it is designed for the stuff it spends most of its time doing, which is 8 bits per channel rasterization.
I'm not sure that this is true. It's extremely common for games to render lighting texture maps with HDR render targets. 16 bit-per-channel render targets are often used to accumulate excess light. The excess light gets processed by successful full screen pixel shader passes. These passes generally include blurring and flattening into a normal 8-bit-per-channel texture on the swap chain.
Furthermore, multiple render targets have been common since before the release of the Xbox 360. Deferred shading engines come into and out of popularity on what seems like a biyearly basis depending on what visual style is popular in games currently.
It seems to me that modern hardware is quite capable of greater color range, but the most demanding applications, games, would rather use that extra video RAM and fill rate for storing and processing surface normals, lighting scalars, material properties, etc. Desktop applications always lag behind games dramatically. Hell, browsers are just now starting to see some of the benefits of modern GPUs.
It's true that they're used to accumulate lighting and other information, but that's basically one of the simplest possible use cases for a render target; you're just writing pixel data.
Multisampling, blending, etc - all things used often in 3D rendering - are not necessarily supported on a >8bpc render target. Whether you can do them depends on the drivers and the hardware. The same goes for textures that are >8bpc (filtering might not work, for example).
I ran into this problem just yesterday in a program I was writing when I tried to do blending on a high precision render target. :)
However, my point is that it has been some fifteen years since 24-bit "True Color" arrived. Certainly since then we've increased computing performance to the point where we can manage to throw a few more bits around, yes?
Also, you're right that browser vendors are dutifully concerned about performance. In fact, one of the reasons I enjoyed adding a subtly animated background (see previous reply apologizing to those who hate it) was a bit of evidence to back up another point I've made elsewhere: in 2012 our computers that process billions of CPU operations per second paired with high-powered GPUs can still get chunky with relatively trivial 2D animation in a web browser.
Incidentally, on that point, if you happen to have IE 10, check out how well it uses your GPU to do CSS transitions. It doesn't do the SVG/SMIL animation used in the background, but I find it fascinating how effortless it executes the animation it does support: http://tiamat.tsotech.com/ie-10-is-no-joke
I'd really like to see Chrome and Firefox catch up with that degree of GPU acceleration.
But in this particular blog entry, I'm asking that some attention return to rendering quality. I'd love to see color banding in gradients disappear soon.
I aim to detect mobile browsers and just disable the background by default on mobile. (Incidentally, on the client side, is using Modernizr's "touch" flag a best practice here? I'm something of a noob.)
I hope this developer isn't making content on real websites.
I disabled JavaScript on the site, hoping that would make it behave, and got... no blog, only this:
> This blog uses a little JavaScript. Nothing dodgy, though, and nothing hosted at third-party sites. Just some jQuery and animation bits. So please, if you'd be so kind, ask Noscript to call off the hounds.
Congratulations, those “animation bits”, which you won't let me turn off, make your site unbearably annoying to read.
In the lower right corner of the site there is the word "normal". Hover over this area and select "stop animation" from the menu that appears.
(Not that this excuses any of it. Just saying it's possible.)
(Didn't see any controls whatsoever, but that site happily slowed my FF to a crouch)
And that ignores the issue of argueing for more fidelity while making the argument hard to read.
background-image: linear-gradient(to left, #484848, #494949); background-image: -moz-linear-gradient(right, #484848, #494949); background-image: -webkit-linear-gradient(right, #484848, #494949);
The point I'm making is this: it was good enough in ~1995. Frankly, it was awesome back then! But is it really still good enough in 2012?
Of course much of the media we consume has quantized colour, streamed videos especially don't really stand up to any kind of close examination using today's displays, never mind futuristic ones. Banding from limited gamut is not the big problem here, there are much bigger elephants.
24bit is fine. It's <200dpi that has to die.
I've zoomed it in until the bars almost filled the screen and I still didn't see any gradient, despite reading in the text it should have been so obvious. Kind of defeats the point about 24 bit sucking...
Edit: I can't see it because my config does automatic dithering. See my other posts.
Several monitors turn your 8-bpp image to a 6-bpp image.
But a lot of them apply temporal dithering to kinda make up the lost 2 bits.
Graphic designers usually pay for good quality monitors, but they would be well served by also having a bad monitor to check what their work looks like for most people.
The obvious answer (or strawman) might be aesthetics. Yet two bits is sufficient to create art. Each medium has its limitations. Pen and ink, watercolor, clay - why should a computer screen be seen as inherently different?
We tend to view computer art on our own often miscalibrated displays, under variable lighting conditions, and at a variety of resolutions. Computer art is generally mass produced. Yes, it is behind glass, but not in the manner of the MonaLisa.
I'm not saying that "deep color" isn't worthwhile. Only that a coherent case for its practical advantages wasn't made. The problem wasn't obvious on my screen, and I am biased toward content over form.
Edit: it looks perfect because my sw/hw config (driver Xorg fbdev 0.4.2, AMD Fusion E-350, Lenovo X120e laptop) does automatic dithering. I can see a tiny bit of dithering on the white end of the other gradient posted by nhw: http://file.st/KWb7XS7x Other that that, no banding on either images. Dithering invisible on yours. Dithering 24-bit colors really helps.
I'd like 64bit displays too. The problem is that there's quasi no content and also no content pipeline. Someone has to take the first step here.
And having 2GB of VRAM does not imply that you'll need a 268-million pixel display to use it all. In modern games, the vast majority of that VRAM is used by textures (and we need as much of it as we can get!)
http://code.google.com/p/chromium/issues/detail?id=41756 Issue 41756: WebKit gradients show banding on Chrome
If he really thinks that there's only one step between #484848 and #494949 then I'd suggest reading a bit on MS' ClearType and using a magnifier to take a closer look at how Windows or OS X fonts are rendered. Hint: it's not grayscale anti-aliasing.
I honestly don't think that using dithering "because pixels are small" would provide better result than sub-pixel anti-aliasing.