CHAPTER 9: Android Graphic Design: Making Your UI Designs Visual 311Using Indexed Color Imagery: Dithering Pixels
Indexed color images can simulate truecolor images, if the colors which are used to create the
image do not vary widely. Indexed color images use 8-bit data to define the image colors, using a
palette of 256 optimally selected colors, rather than 3 RGB color channels. Depending on how many
colors are used in the image, using only 256 colors to represent an image can cause an effect called
banding, where the transfer between adjoining colors is not smooth. Indexed color image codecs
have an option to correct for this visually called “dithering.” Dithering is the process of creating
dot-patterns along the edges of two adjoining colors in an image. This tricks your eye into thinking
there is a third color being used. Dithering gives us a maximum perceptual amount of colors of
65,536 colors, (256 times 256), but only if each of those 256 colors borders on each of the other 256
colors otherwise it would be less than 65,536 perceived colors.
You can see the potential there for creating additional colors, and you’ll be amazed at the result
an indexed color image can achieve in some scenarios (that is, with certain images). Let’s take a
truecolor image, such as the one that is shown in Figure 9-2, and save it as an indexed color image
to show you a dithering effect. We’ll take a look at this dithering effect on the driver’s side rear fender
on the Audi racecar 3D image, as it contains a smooth gradient of gray color.
Figure 9-2. A truecolor source image which uses up to 16,777,216 colors which we are going to optimize to 5-bit PNG5
I set the codec to encode a PNG8 image, shown in Figure 9-3, using 5-bit color ( 32 colors), so that
you can see this dithering effect. As you can see, dot patterns are made between adjacent colors,
creating the perception that there are additional colors beyond the 32 being used to create
the image.