Return Home to Overview/Index

Graphics

Craig L. Scanlan, EdD, RRT, FAARC
Professor, Department of Interdisciplinary Studies
UMDNJ-School of Health Related Professions

A graphic is a picture (drawing or photograph). As with all else digital, a computer graphic is simply a set of binary bits (0s and 1s). However, there are two major ways computers create and store graphics: raster graphics and vector graphics.

Raster graphics represent graphical images as a pattern of dots, called a bit map (this is why raster graphics are also called bit-mapped graphics). With vector graphics, images are represented as mathematical formulas that define the shape of all objects in the image. For this reason, vector graphics are often called object-oriented graphics.

The major advantage of vector graphics over the bit-mapped format is that vector graphics look the same, even when you scale them to different sizes. In contrast, raster graphics tend to become ragged-looking when you change their size. On the other hand, only raster graphics can reproduce photo-realistic images.

Programs that manipulated raster/bit-mapped images usually are referred to as paint programs, whereas programs that enable you to create and manipulate vector graphics commonly are called draw programs. Most high-end graphics programs can create and manipulate both types of images.

Raster (Bit-Mapped) Graphics

A raster format breaks an image down into rows and columns of dots, called picture elements or pixels, for short. The pixel density, known as the resolution, determines how sharply the image appears. This is often expressed in dots per inch (dpi) or simply by the number of rows and columns, such as 800 by 600 (the resolution of a typical SVGA computer monitor screen). A megapixel image is made up of more than one million pixels, with a resolution exceeding 1000 by 1000.

Rendering of Raster Images and Color Depth

To display a raster image on a monitor screen, the computer translates the bit map data into individual pixels. To print a raster image, the computer and printer translate the bit map data into individual ink dots. Below is an example of how a computer monitor or printer would render a simple black & white raster image. As can be seen, rendering a simple black & white image only requires that each pixel be either 'on' (1) or 'off' (0):

On color monitors, however, each pixel is made up of three different color signals: red, green and blue (like a TV). Each pixel's appearance is controlled by the intensity of these three color signals. When all are set to the highest level the result is white; when all are set to zero the pixel is black.

The value of each pixel is stored in one or more bits of data. For simple black & white or monochrome images (like the one shown above), one bit (0 or 1) is sufficient to represent each pixel. If we want shades of gray or colors, each pixel must be represented by more than one bit of data. The more bits used to represent a pixel, the more colors that can be represented (increased color depth). The table below shows an example image for each of the common color depths (bits-per-pixel/maximum number of colors):

Bits per Pixel Maximum Colors	Example
Bits per Pixel: 1 Maximum Colors: 2
Bits per Pixel: 4 Maximum Colors: 16
Bits per Pixel: 8 Maximum Colors: 256 (color palette)
Bits per Pixel: 16 Maximum Colors: 65,536 (high color)
Bits per Pixel: 24 Maximum Colors: 16,777,216 (true color)

24-bit color provides the most realistic representation of the color of images, and is thus called "true color." In 24-bit color images, three bytes of information are used for each of the three color signals constituting a pixel. Since a byte has 256 different values, this means that each color can have 256 different intensities, allowing over 16 million possibilities (256 x 256 x256). True color is a necessity for those doing high-quality photo editing, graphical design, etc.

It should be noted that the greater the color depth, the more memory required to store (RAM and hard drive) and display (video card) an image. In terms of the video display, memory-intensive images can slow screen refresh rates. For this reason high color is often used instead of true color. High color uses two bytes of information to store the intensity values for each of the three colors, resulting in over 65,000 different color possibilities. This reduced color precision results in a slight (usually imperceptible) loss of visible image quality, but uses less video memory, which makes for faster display.

In 8-bit color mode (256-colors), a computer processes only 8 bits of data per pixel. This means limiting colors to no more than 8 different values, which gives most images an extremely artificial look. To avoid this problem, 8-bit color images use a palette of 256 different colors. Each of these 256 colors is defined the same way as in true color: 256 possible intensities for each of red, blue and green. Thus an 8-bit image can ‘choose from’ the full range of 16 million colors, but can use only a maximum of 256.

Since virtually no image uses all 16 million colors, 8-bit color can provide acceptable quality under certain circumstances. For example, graphic artwork (line drawings, icons, cartoons) seldom use more that a couple dozen colors and look just fine in 8-bit color. Even some photographs can be rendered satisfactorily with 256 colors. For example, an image of the sky with clouds (like in the Windows 98 background) uses mainly shades of blue and gray, with virtually no reds, greens, or yellows. For this type image, a 256 color palette (mainly shades of blue and gray) is satisfactory. However, when viewing a photographic image representing a broad range of colors, most people easily can tell the difference between the 256 color and the true color renditions.

Raster Graphics Formats

As with word processor or document file formats, there are dozens of proprietary raster graphic file formats. These raster graphics file formats are known in shorthand by their file extensions, e.g., BMP, GIF, JPEG, PCX, TGA, TIFF. Also as with word processors (luckily), there are only a handful of these formats that you will commonly encounter, and fewer still that you will use. Moreover, there are several good (and some free) utility programs that can convert between and among most raster graphic file formats. For example, if you have several good old PCX images (the old PC PaintBrush format), you can easily convert them to either the GIF or JPEG format, as needed for display on the Web. The raster graphics formats you need to be most familiar with include BMP, GIF, JPEG and PNG.

BMP

An acronym for ‘bitmap,’ the BMP format is the standard raster graphics file format used in all Microsoft Windows applications. The BMP format provides for various color depths, from black and white (I bit), through palletized 16-color (4-bit) and 256-color (8-bit), to true color (24-bit) images. Compression (RLE) is only available for the 4- and 8-bit images. BMP files are stored in a device-independent bitmap (DIB) format that allows Windows to display the bitmap on any type of display device. The term "device independent" means that the bitmap specifies pixel color in a form independent of the method used by a display to represent color. The BMP format does not provide for transparency and is not a Web standard.

GIF

GIF stands for Graphics Interchange Format, an 8-bit, 256 color raster graphics format defined in 1987 by CompuServe. The GIF format was developed primarily to support on-line transmission and interchange of bitmapped images, and has become one of two standard formats for Web graphics. To speed online transmission and downloading, GIF files are compressed using the lossless LZW compression algorithm (a lossless compression method creates smaller files that the original, but without any loss of data or color resolution). GIF images are indexed to a palette, and support transparency, interlacing and simple animation.

A GIF image that incorporates transparency displays on a Web page with the page's background showing through the transparent parts of the image. This gives the image the appearance of ‘floating’ over the page background.

Standard GIF Image		Transparent GIF Image

With interlacing, the GIF image displays in two passes of alternating lines. Depending on which graphics viewer or Web browser is being used, interlacing may produced either a "venetian blind" effect or simply a blurry image that gradually ‘sharpens.’ Because pages using interlaced GIFs let people see at least the outline of the images almost immediately, they appear to load faster than those with noninterlaced graphics

The GIF89a format also supports simple animation. An animation is a collection of related still images or "frames" that are displayed sequentially, giving the illusion of motion (see example to right). GIF animations are like the little hand-held flip-page cartoons some children make in grammar school. The designer can control the speed of image ‘flipping’ and whether or not the animation ‘loops’ or replays continuously. The viewer, however, has no control over starting or stopping a GIF animation. GIF animations do not support sound.

JPEG

JPEG stands for Joint Photographic Experts Group, the committee that originally created this bitmap graphics format. JPEG images provide are 24-bit images, providing up to 16 million colors (true color). Because such images can be extremely large (in KB or MB), the JPEG standard provides for variable, ‘lossy’ image compression. The greater the compression percent, the greater the loss of data and the poorer the quality of the image. To provide for partial viewing of images while being downloaded, JPEG also supports a technique called progressive display (similar to GIF interlacing). JPEG is the second of the two standard widely-used and support Web graphics formats, and is the primary choice for displaying photographic images.

PNG

PNG stands for Portable Network Graphics. The PNG format is a new bitmap graphics format that recently has been approved as a third standard for the World Wide Web. The PNG format offers all the features provided by the GIF and JPEG formats (up to 256 indexed colors, support for 24- and 48-bit true color, full alpha-channel support for transparency), but uses a lossless compression significantly more efficient than that used by GIF formatted images.

Below is a summary table comparing the advantages and disadvantages of these common raster graphics formats:

Vector Graphics

Vector graphics are images created by geometrical instructions or mathematical formulae that contain information about the location and characteristics of various lines, curves and shapes. By following these instructions, the computer can create the variety of elements needed to form an image. For example, a simple vector graphic might include instructions that tell the computer to draw a circle with a specific location (the origin or center point) and with a specific radius.

The vector format is not appropriate for rendering photo-realistic images. However, for other types of images, the vector format has two big advantages over raster graphics: (1) vector graphics are scalable, i.e., they can be can be resized and stretched without distortion; and (2) vector graphics files are usually much smaller than bitmap files and thus use less memory in storage and less bandwidth in transmission. This makes them ideally suited for the World Wide Web.

For these reasons, almost all sophisticated graphics software, including computer-aided design (CAD) and animation tools, use vector graphics. In addition, many printers (PostScript printers, for example) use vector graphics to render fonts (see prior section on text and fonts).

It is important to note that most output devices, including printers and display monitors), are raster devices. This means that all objects, even vector objects, must be translated into bit maps before being output. The difference between outputting vector graphics and raster graphics, therefore, is that vector graphics are not translated into bit maps until the last possible moment, after all sizes and resolutions have been specified. PostScript printers, for example, have a raster image processor (RIP) that performs the translation within the printer.

As with most data formats, there are both proprietary (closed) and open standards for vector graphics. The most common proprietary vector graphics standards are Autodesk/AutoCAD (DWG), CorelDRAW (CDR), Micrografx Draw (DRW) and Adobe Illustrator (AI). To facilitate sharing of diagrams and drawings, most vector-based application programs can read and write a common ‘open’ vector graphics format called the Data Exchange File (*.DXF).

‘Open’ vector graphics formats include PGML (Precision Graphics Markup Language) and VML (Vector Markup Language). A third open standard, Scalable Vector Graphics (SVG), has just recently been defined by the World Wide Web Consortium (W3C). All three of these standards are based on XML (see above) and thus well suited for delivery of vector images over the World Wide Web.

Recently, Macromedia developed a vector graphics tool and format called Shockwave Flash (*.SWF file format). Flash was designed primarily to provide vector-based images and animation (with sound, if desired) within Web browsers, using a free reader/plug-in that you can download from the vendor. Recently, Netscape/AOL announced it would incorporate the Flash format into its Navigator browser.

Metafile Formats

A ‘meta’ file format can contain both raster and vector images, including editable text. As an example, the popular Window metafile format (WMF) might contain a bitmap, vector information, and text, with the bitmap constituting the majority of the image, and the vector and text data providing annotation.

The following table lists the most common metafile graphics formats. Note that some of these have already been described under the vector category (this is because most vector-based programs can also accommodate raster graphics):

© Craig L. Scanlan, 2001. Version 2.0 - January 2002. Original version January 2001.

Return Home to Overview/Index