What is "Dithering"?

Back in 1992, we were trying to develop a little game called Myst, but we needed it to be playable with the technology available at that time. The problem: the single speed CD-ROM drives were very slow, hard drives were very small, and most computers weren't able to display the 24-bit images that we were rendering anyway.

Original 24-bit rendering.

What could we do? Well, we solved several of these problems by reducing the number of colors used in each image. By using 8-bit color, rather than 24-bit color, the size of each picture was greatly reduced. This meant it could be retreived from the CD-ROM in much less time, more of the commonly used assets could fit on the hard drive, and the pictures could be displayed on machines that weren't able to display the 24-bit pictures.

But, with every compromise, there are drawbacks. In this case, it meant that every picture would be converted to just 256 colors, out of the 17 million+ colors that has been used to render the images. This would have been disasterous to image quality if it weren't for "dithering".

Myst image converted to 256 colors without dithering. (Yuck!)

Dithering takes advantage of how our brains interpret the information that our eyes send to it. We generally don't pay attention to each individual pixel in a picture, our brain just kind of averages groups of pixels together. A simpler example of this is this black and white picture from Cosmic Osmo.

There really are only black pixels and white pixels, but the different patterns of these pixels make the picture appear to also have shades of gray.

Dithering with color pixels is a very similar process. The software that creates the dithered image uses patterns of the colors it has to simulate colors that it doesn't have. As long as you aren't specifically looking for the dithering patterns, your brain does a pretty good job of fooling itself into seeing colors that aren't actually there.

Of course, there are many options for dithering a picture. Some are more effective than others, and the dithering method used will depend on several factors.

Myst image converted to a default 256 color palette with dithering.

The above example uses the 256 colors that are available on the default Mac palette. The colors on that palette obviously weren't selected with a picture like this in mind. It's missing a lot of the greens for the grass, so the software has had to dither the grass a lot to try to match the original colors.

Myst image converted to an adaptive 256 color palette.

This method allows the software to pick the best 256 colors per image. The results are remarkable. There is almost no loss of color or detail, and very little noticeable dithering. The drawback is that if you dither each picture to its own palette and then play the game in 256 colors, every time you change pictures you get this nasty flash of the picture with all the wrong colors (called "flaring"), for a split second when the palette changes for the next picture.

This was the method used for Riven (basically), since by 1997 enough computers could handle running the game in 16-bit, and we could change the palette between each screen without flaring.

For Myst, running in 256 colors, an adaptive palette for each picture was not an option, so we came up with an interesting compromise: a 256 customized palette for each Age. We could change palettes while the screen was black between Ages, so there was no flaring, and each Age would look that much better.

The 256 color dithered image with optimized palette for each Age - what was used in the game.

Yes, there is still noticeable dithering if you're looking for it, but at frist glance the picture is remarkably close to the original.

Side by side comparison of original 24-bit image to final 8-bit dithering. A pretty good compromise.

Class Dismissed.