Digital Images 101
by Aaron Ross

Any image stored on a computer falls into one of two categories: vector or bitmap. They are radically different ways of digitally representing an image, although in some cases the two methods are combined in the same document.

Vector Graphics

In mathematics, a vector is a line which has a length and a direction. A vector computer graphic, then, is an image composed of lines. These lines are often curved. Other features of vector graphics can include flat colors and gradients.

All aspects of a vector graphic are defined by mathematical relationships, and are stored as equations, rather than an explicit depiction of the image. These equations are merely instructions on how to draw the image; the image itself is not stored. Every time a vector image is opened, it is recreated from scratch based upon the instructions stored in the file.

As a result, a vector graphic is nearly infinitely scalable; that is, the user can zoom into tiny details of the image without sacrificing quality. Vector images can be displayed at any size with no noticeable image degradation.

The fact that vector graphics are stored as equations also means that simple vector images take up very little space on disk, and can be transmitted across computer networks very quickly. For that reason, vector-based applications such as Macromedia Flash are very useful on the Internet, where bandwidth is limited. Other uses of vector graphics include typefaces and line-art illustrations.

However, complex images are not good candidates for vector graphics. The equations can become so long and complex that computers have a hard time calculating the result. File size also becomes unmanageable. Realistic images such as photographs are better represented as bitmap graphics.

Bitmap Graphics

A bitmap graphic is composed of a fixed grid of pixels. The word pixel is an abbreviation of picture element. A picture element is the smallest piece of a bitmap image, a single cell in the grid or matrix. Many very small pixels, packed closely together, give the viewer the illusion of a single, unbroken image.

Resolution

There is a limited number of pixels per bitmap image, also known as its resolution. A bitmap graphic cannot be divided into smaller spatial chunks than individual pixels, so it is said that we cannot resolve anything smaller than a pixel. The resolution of the image is the number of horizontal pixels (number of columns) multiplied by the number of vertical pixels (number of rows). Image resolutions are expressed as (width x height), such as 640 x 480, or 1920 x 1080.

Note that all modern computer monitors use a bitmap system, and the resolution of the desktop is expressed in pixel values, such as 1024 x 768, or 1280 x 1024. Any image you see on the screen, even a vector image, is ultimately converted to a bitmap through a process known as rasterization.

Resolution is not directly related to image quality. Resolution is merely a count of how many pixels exist in the image. The number of pixels does not determine how good an image looks. However, high resolution images have the possibility of being crisper and sharper than low resolution images.

Because the resolution of a bitmap is limited, zooming in on the image reveals the grid or mosaic structure. For this reason, it is usually inadvisable to scale a bitmap up, or increase its resolution. Bitmap editing applications such as Photoshop allow the user to change bitmap resolution by averaging the values of adjacent pixels to create new pixels. This is known as resampling the bitmap, because each pixel is a sample of an image. Increasing bitmap resolution is called upsampling.

Beyond a certain point, the process fails, because there is too much guesswork involved. The result is a poor quality, soft and fuzzy image. Simply blowing up an image in Photoshop will not create additional detail. If it is necessary to increase image resolution, it is better to recapture the image at a higher setting. If the image was scanned, it should be scanned again at a higher resolution.

Sometimes, reducing bitmap resolution can actually improve image quality. This is known as downsampling, oversampling, or supersampling, For example, if a photograph is scanned at 1280 x 960, and then its resolution is reduced to 640 x 480 in an image editor, it may look better than if it was scanned at 640 x 480 to begin with. This technique is widely used in computer graphics to deal with problem images which show undesirable artifacts such as aliasing, a term for jagged edges in images.

Resampling should be avoided if possible. If it is absolutely necessary to scale a bitmap up or down, it should only be done once. Each time the image is resampled, it loses quality. Repeated resampling will degrade the clarity of the image, resulting in a soft and indistinct picture.

Pixels per Inch

When a bitmap image is printed, each pixel must have some size; it must take up some area on the page. This is measured in number of pixels per inch, or ppi. An image with a low ppi prints out larger than an image with the same resolution at a high ppi. 72 ppi results in bigger pixels than 600 ppi.

Image size, or pixels per inch, is independent of image resolution. An image with a resolution of 100 x 100 pixels, at 100 ppi, will print out to be one inch square. If we change the ppi setting to 200, then the same image will print out at half size, or one half inch square. The number of pixels does not change; it is merely how large each pixel is drawn that is different. As the number of ppi increases, the image prints out smaller -- if resolution stays the same.

Computer monitors never represent the number of pixels per inch accurately. Because monitors are different sizes, and desktops are set to different resolutions, there is no way for an application such as Photoshop to accurately depict an image at the requested number of pixels per inch. Viewing options such as "print size" or "actual size" attempt to approximate the effect of a printed page, but they usually fail miserably.

Generally speaking, it is best to view images on the computer screen at a one-to-one pixel ratio. That is, one pixel of the source image is drawn as one pixel on the monitor screen. Photoshop calls this viewing at "Actual Pixels." In this viewing mode, changing the ppi setting results in no visible change in the image! This is normal.

Ppi is often confused with dots per inch (dpi), which refers to the hardware capabilities of a printer. Desktop laser printers can commonly output 600 dots of toner per inch; inkjet printers generally go much higher, such as 1440 dots of ink per inch, or more. However, it is common to print an image at a different number of pixels per inch, such as 72 ppi. In this case, the printer simply repeats its dots of ink or toner to make the image the correct size, as specified in the image file's pixels per inch setting.

To further confuse the issue, some applications do not refer to the image file's ppi setting as such. They may refer to the number of pixels per inch as "dpi," or "resolution." In these cases, what they are referring to is the printed size of the pixels in the image, not the capabilities of the printer or the number of pixels in the image.

The number of pixels per inch is a critical consideration when scanning images. A high ppi setting on the scanner results in a high resolution image, and a low ppi results in a low resolution image. For example, scanning an image which is ten inches tall, at a setting of 72 pixels/inch, results in a file which is 720 pixels tall. Scan the same image, which is ten inches tall, at a setting of 300 pixels/inch will result in a file which is 3000 pixels tall.

When working solely with synthetic CG images, such as 3D renderings, the ppi setting is not of much concern to the artist. However, it is of paramount importance when scanning, or when printing out images for portfolios or client reviews. One cannot expect a 640 x 480 image to print out satisfactorily to fill a 17" x 11" sheet of paper; the result would only be about 50 pixels/inch, and the image would look fuzzy. In this case, the image should be re-rendered in the 3D application, perhaps to a resolution such as 2000 x 1500 pixels at 150 ppi.

Web designers always create their images at 72 ppi. This is so that when a web page is printed, the images will be approximately the same size on the page as they are on the computer monitor. 3D print illustrators must pay particular attention to the variables of resolution, pixels per inch, and dots per inch, since the final result will be on the printed page. 3D artists working in the film medium must also understand these concepts. Due to the small size of the film frame, it is critical for film recorders and scanners to handle many thousands of pixels per inch.

Bit Depth

Resolution and pixels per inch determine the accuracy of an image across its surface area, or 2D space. However, even a super-high resolution, super-high ppi image will look terrible if its color reproduction is not faithful to the original. The accuracy of color in a bitmap image is determined by its color depth or bit depth.

Bit depth is the number of bits per pixel. A high bit depth means that a lot of information is stored in each pixel, and therefore there are many choices for the color of that pixel. More color choices result in a better reproduction of the image. All pixels in a bitmap image have the same bit depth, but they usually have different numerical values, and therefore different colors.

A bit is the smallest amount of information possible; either a zero or a one. Bits are employed in digital computers to encode numbers in the binary (base two) number system. If an image stores 8 bits per pixel, that means it stores an eight-digit binary number for each pixel. The highest possible eight-digit binary number is 11111111, which translates to 255 in our familiar decimal (base ten) number system.

For an eight-bit number, there are 256 possible values, from zero to 255. The number 256 is the result of calculating two to the eighth power.

As the number of bits rises, the number of possible values expressed by those bits rises exponentially, as shown in the table below.

8 bits = 28 = 256
16 bits = 216 = 65,536
24 bits = 224 = 16,777,216

While an eight-bit image can only choose from 256 colors, a 16-bit image can have over 65,000 colors. Doubling the amount of data stored (number of bits) results in a vastly greater number of possible values. Adding another eight bits, for a total of 24, results in over 16 million possible colors.

An image which stores many bits per pixel is said to have a high bit depth. This refers to the imaginary "thickness" of a pixel. Of course, 2D images have no real thickness, but the concept of depth is used as a metaphor for the accuracy of the pixel. High-bit images are deeper than low-bit images.

Eight-bit images are often used for web pages, via the CompuServe GIF image format. However, for animation, 24-bit images are standard. Common image file formats for 3D are .TGA (Targa), .TIFF, and .RLA. Targa files are the most common for animation, and almost all graphics programs can load and save Targas.

24-bit images are sometimes called "True Color," because 16 million variations in color are about the maximum that human beings can perceive. Some specialized systems use higher bit depths than 24, for that extra "bit" of quality. Motion picture film scans are commonly made at 30 bits per pixel, so that the scan can capture the full range of tonality present in the film medium.

Color Channels

Bitmaps with 24 bits per pixel or higher are commonly divided into color channels. Each channel stores a primary color component. A primary color is one which cannot be created by mixing other colors.

Computer monitors use the RGB system, in which the three component primary colors are red, green, and blue. This system is based on the tristimulus theory of human visual perception, which states that nearly any color we see can be synthesized by mixing the three primary colors of red, green, and blue in varying amounts. This is how all color computer monitors and video screens work: by mixing red, green, and blue light. It is called additive color, because when you add red, green, and blue light, you get white light.

There are other color systems besides RGB. Print media commonly use a four-color process, in which the primaries are Cyan, Magenta, Yellow, and Black. This color system is called subtractive color, because when you remove Cyan, Magenta, and Yellow ink from a page, you are left with white paper.

In the four-color process, black ink (known as the Key color among graphic artists) is added to produce a rich dark color, which is difficult to achieve with Cyan, Magenta, and Yellow alone. So, the four-color process of subtractive ink is called CMYK.

A low numerical value in a pixel within a channel means there is not much of that primary color present in that particular pixel. A high numerical value results in that primary color contributing a lot to the final color of the pixel. If a bitmap has eight bits in a channel, then that channel may have values ranging from zero to 255.

An RGB pixel which is pure red would have a Red value of 255, a Blue value of zero, and a Green value of zero. An RGB pixel which is pure Magenta (deep pink) would have a Red value of 255, a Blue value of 255, and a Green value of zero. An RGB pixel which is pure white would have a Red value of 255, a Blue value of 255, and a Green value of 255.

Most bitmaps use eight bits per channel. So, an RGB bitmap is usually:
(8 bits) x (3 channels) = 24 bits

and a CMYK bitmap is:
(8 bits) x (4 channels) = 32 bits

Alpha Channels

Finally, in computer animation there is often a need to layer or composite images over one another. For example, a foreground character and a background image may be placed on different layers in a compositing program. In order to see through to the background, the foreground element must have form of transparency. The simplest way to store transparency in a bitmap image is by adding another eight-bit channel called an alpha channel.

The alpha channel acts as a mask or matte, making some parts of the image opaque and others transparent. The alpha channel holds eight bits of data, so there are 256 possible levels of transparency. This range of gray values allows for partial transparency, which is particularly important for smoothness at the edges of objects. Usually, black pixels in an alpha channel are fully transparent, and white pixels are fully opaque.

The most common type of image file found in computer animation is an RGB+A bitmap. This is a 32-bit image, with 8 bits each of red, green, blue, and alpha. The TGA, TIF, and RLA formats all support this RGB+A configuration. If you render an image in a 3D program, and save it as a 32-bit TGA file, you can then easily superimpose that image over another background in a compositing application.

by Aaron Ross
October 14, 2002