TAPESTRY: The Art of Representation and Abstraction

Digital Film: Raster Graphics

Paint Graphics

[Vector vs Raster] The figure at right illustrates the two known ways to store and process 2D computer graphics. The right side represents the "raster" approach to images and requires you to think of the image as a rectangular grid of colored picture elements (pixels) that collectively approximate the final result--all you need to know is where they are and what color they are. Each pixel's color is entirely independent of the neighboring pixels.

Each pixel has a color, drawn from a palette or range or possible colors. The number of colors available depends on the bit depth of the image (the amount of memory-per-pixel for representing color).

The critical concern with raster graphics is the resolution (number of pixels in each row and column) of the image, and the bit depth of each pixel. (Note: "Resolution" may be used to describe either the total number of pixels in the row or column, or it may describe their density, as in "pixels per inch".) The bit depth may also be called "color depth". Images are also characterized by the usual numbers, such as "16-color" or "256-color" image. Images with 8 or fewer bits per pixel (fewer than 256 colors) usually employ a "color table" -- similar to a paint-by-number scheme -- which equates a more limited set of color numbers (the "palette") with specific, detailed, color data. This allows a 16-color image (4 bits deep) to use 16 shades of gray (or pink!). Varied, but compact. So-called "true color" images use 24- or 32-bits per pixel, meaning that the number of colors that can be represented exceeds the number of pixels in the image, so each pixel can have its own unique ("true") color.



A moderate-resolution (1024x768 pixels) full-color (32-bit) raster image is 3 MB. That's a fair-sized chunk of memory or disk space, so one of the major features of raster image formats is the amount and quality of data compression they can achieve in order to reduce the image file size. Compression schemes are classified as lossy or lossless depending on whether you get back exactly the same image when you decompress it, or an image that looks "pretty much" the same.


Pixels have no inherent size to them. Each pixel from a Landsat satellite represents an area of the earth about 30' across, while the pixels on the computer screen used to view that image are about 1/100". However, when printing an image it is useful to think of the finished print size. If you know any two parts of this triangular relationship (total pixels, finished print size, pixels/inch) you can compute the third, but it does get confusing. A common mistake amongst new web-authors, for example, is changing the pixels/inch (aka "ppi") to make an image "smaller" -- not realizing that the file will contain the same number of pixels, and will thus be the same size on disk and take the same amount of time to transfer.

If you want a large print image (24" square) on a high-quality color printer (150 ppi), you may need a lot of pixels (3600 x 3600).

Color Palette

Each pixel has a color. In "paint by number" (aka "color table") formats, such as GIF, a relatively small-range number (using a small amount of memory/pixel) is stored in the pixel. That number tell which of the palette colors is used to show it. Because the number of entries in the color-table is fairly small, their larger memory requirements (perhaps 4 bytes/color) give the image a wide range of possible colors, though the number of simultaneous colors remains constrained.

Alternatively, for "RGB" images, each pixel stores the complete color description of itself. This can be as small as 8 bits (2 blue bits, plus 3 each of green and red) or as large as 24-bits (8 bits each of red, green and blue) or even more. This means RGB images may still have constrained color-spaces

Common Raster File Formats

Hybrid File Formats

Object-based formats may well include a "raster image" primitive, making it possible to include raster data in what is ostensibly a vector format. The exact nature of the resulting image may only be determined by testing.

Last updated: April, 2014

Valid HTML 4.01 Transitional Valid CSS! [report bug]