Game Development Reference
In-Depth Information
Image color depth is the next most critical contributor to the data footprint of a
compressed image, because the number of pixels in the image is multiplied by 1 (8 bit),
2 (16 bit), 3 (24 bit), or 4 (32 bit) color data channels. This small file size is the reason
8-bit indexed color images are still widely used, especially with the GIF image format.
Indexed color images can simulate truecolor images if the colors that are used to
make up the image do not vary too widely. Indexed color imagery uses only 8 bits of
data (256 colors) to define the image pixel color, using a
palette
of up to 256 optimally
selected colors, instead of 3 RGB color channels or 4 ARGB color channels, containing
256 levels of color each. Again, it is important to note that once you turn a 24-bit im-
age into an 8-bit image by compressing it using a GIF or PNG8 codec, you only have a
potential (maximum) 256 of the original 16,777,216 colors at your disposal. This is
why I am advocating using PNG24 or PNG32 imagery rather than GIF or PNG1 (2 col-
or), PNG2 (4 color), PNG4 (16 color), or PNG8 (256 color) images, which JavaFX
also supports.
Depending on how many colors are employed in any given 24-bit source image, us-
ing 256 colors to represent an image originally containing 16,777,216 colors can cause
an effect called
banding
. This is when the transfer between adjoining colors in the res-
ulting (from compression) 256- (or less) color palette is not gradual and thus does not
appear to be a smooth color gradient. Indexed color images have an option to correct
visually for banding, called
dithering
.
Dithering is an
algorithmic process
of making
dot patterns
along the edges
between any adjoining colors within an image to trick the eye into seeing a third color.
Dithering will give you a maximum perceptual number of colors (of 65,536; 256 ×
256), but this will only occur if each of those 256 colors borders on each of the other
256 colors. Still, you can see the potential for creating additional colors, and you would
be amazed at the result that indexed color formats can achieve in some compression
scenarios (with certain imagery).
Let's take a truecolor image, such as the one shown in
Figure 5-3
, and save it as a
PNG5 indexed color image format, to show you this dithering effect. It is important to
note that PNG5, although supported in Android and HTML5, is not supported in
JavaFX, so if you do this exercise yourself, select the 2-, 4-, 16-, or 256-color option!
The figure demonstrates the dithering effect on the driver-side rear fender in an Audi
3D image, as it contains a gray gradient.
