Color is our perception of the various frequencies of light that reach the retinas of our eyes. Our retinas have three types of color photoreceptor cone cells that respond to different sets of frequencies. These photo-receptor categories correspond to the colors red, green, and blue. All other colors perceptible by the human eye can be made by combining various amounts of these three colors.

In a computer, color is often expressed as an RGB (red-green-blue) value, which is actually three numbers that indicate the relative contribution of each of these three primary colors. If each number in the triple is given on a scale of 0 to 255, then 0 means no contribution of that color and 255 means full contribution of that color. For example, an RGB value of (255, 255, 0) maximizes the contribution of red and green and minimizes the contribution of blue, which results in a bright yellow.

The concept of RGB values gives rise to a three-dimensional color space. FIGURE 3.10 shows one way to display such a color space.

The amount of data that is used to represent a color is called the color depth. It is usually expressed in terms of the number of bits that are used to represent the color. High color indicates a 16-bit color depth. With this scheme, 5 bits are used for each number in an RGB value and the extra bit is sometimes used to represent transparency. True color indicates a 24-bit color depth. With this scheme, each number in an RGB value gets 8 bits, which gives the range of 0 to 255 for each. This results in the ability to represent more than 16.7 million unique colors.

The following chart shows a few true color RGB values and the colors they represent:

The 24-bit true color values provide more colors than the human eye can distinguish. Furthermore, the monitors that display colors are restricted to a particular color depth. In older hardware in which monitor colors are reduced to, say, 256 colors, any color that is specified by a program is mapped into the closest color in the palette of colors that the hardware is capable of displaying. FIGURE 3.11 shows such a restricted color palette. When there are significant differences between the colors desired and the colors that can be displayed, the results are usually unsatisfactory. Thankfully, most modern monitors provide enough color range to greatly reduce these problems.

A photograph is an analog representation of an image. It is continuous across its surface, with shades of one color blending into another. Digitizing a picture is the act of representing it as a collection of individual dots called pixels, a term that stands for picture elements. Each pixel is composed of a single color. The number of pixels used to represent a picture is called the resolution. If enough pixels are used (high resolution) and are then presented in the proper order side by side, the human eye can be fooled into thinking it’s viewing a continuous picture. FIGURE 3.12 shows a digitized picture, with a small portion of it magnified to show the individual pixels.

The storage of image information on a pixel-by-pixel basis is called a raster-graphics format. Several popular raster-graphics file formats are currently in use, including bitmap (BMP), GIF, and JPEG.

A bitmap file is one of the most straightforward graphic representations. In addition to a few administrative details, a bitmap file contains the pixel color values of the image from left to right and from top to bottom. A bitmap file supports 24-bit true color, although usually the color depth can be specified to reduce the file size. Such a file may be compressed using run-length encoding.

Graphics Interchange Format (GIF), which was developed by CompuServe in 1987, limits the number of available colors in the image to 256. That is, a GIF image can be made up of only 256 colors, but each GIF image can be made up of a different set of 256 colors. This technique, called indexed color, results in smaller file sizes because there are fewer colors to reference. If even fewer colors are required, the color depth can usually be specified with fewer bits. GIF files are best used for graphics and images with few colors, and are therefore considered optimal for line art. A version of the GIF format allows for small animations to be defined by storing a series of images that a program such as a browser displays in succession.

The JPEG format is designed to exploit the nature of our eyes. Humans are more sensitive to gradual changes of brightness and color over distance than we are to rapid changes. Therefore, the data that the JPEG format stores averages out the color hues over short distances. This format is considered superior for photographic color images. A fairly complicated compression scheme can significantly reduce the resulting file sizes.

PNG (pronounced “ping”) stands for Portable Network Graphics. The designers of the PNG format wanted to improve upon, and ultimately replace, the GIF format. PNG images can usually achieve a greater compression than GIFs, while offering a much wider range of color depths. An extension to the PNG specification (called APNG) allows for animated images that are similar to animated GIFs.

The file that represents an image may contain metadata about the image. In general, metadata is data about data; that is, it is data that describes the purpose and/or structure of other data, and possibly helps the user manage that data.

In the case of an image, metadata might include the date and time the image was created, and details of the size and resolution of the image. If the image is a photo, it may contain the location where the photo was taken (longitude and latitude). It also may contain the creator of the image and whether it is copyrighted.

Vector graphics is another technique for representing images. Instead of assigning colors to pixels as we do in raster graphics, a vector-graphics format describes an image in terms of lines and geometric shapes. A vector graphic is a series of commands that describe a line’s direction, thickness, and color. The file sizes produced with these formats tend to be small because every pixel does not have to be accounted for. The complexity of the image, such as the number of items in the picture, determines the file size.

A raster graphic such as a GIF must be encoded multiple times to account for different sizes and proportions. By contrast, vector graphics can be resized mathematically, and these changes can be calculated dynamically as needed.

However, vector graphics images are not good for representing real-world images. JPEG images are far superior in that regard, but vector graphics images are good for line art and cartoon-style drawings.

There are two dominant vector-graphics formats in use today: Adobe Flash and Scalable Vector Graphics (SVG). Flash images are stored in a binary format and require a special editor to create. SVG images are represented in plain text and therefore can be created and modified using a regular text editor as well as using a drawing program. The SVG specification was developed by the World Wide Web Consortium and is well-supported by all major browsers.