In order to appreciate the capabilities of Firework’s web publishing tools it is first necessary to acquire a basic understanding of digital image types.

There are two digital image types: bitmaps and vectors. Bitmap images are the most common type of image file outside the professional print world. Bitmap files map out or plot the image on a pixel-by-pixel basis. Computer displays are made up of a collection of individual points or dots, called pixels, organized in columns and rows (similar to a table or a grid) where each cell represents each pixel in the image. The bitmap image file basically plots each pixel, such as pixel 300 wide by 250 high is red.  Pixel 301 wide by 250 high is also red. Pixel 302 wide by 250 high is yellow and so on. Because bandwidth is a major concern when developing web sites, keeping the size of images to a minimum is very important. The main benefit of bitmap images is photographic color, tone, and texture is accurately produced.

If you were to plot a bitmap on a grid, each pixel is detailed. Essentially, this is what your computer does when it displays bitmaps.

(Figure 1.1)

Vector images do not plot images on a pixel-by-pixel basis. Instead, vector files contain a description of the image expressed mathematically. Essentially, the file tells the computer about the image and the computer draws it. For instance, the image of a circle in vector format, written in plain English, might look something like this:

· Circle (200px)

· Fill Color: Gradient

· Gradient Type: Radial

· Colors: White, Black

· Line Color: None

One of the benefits of vector images is file size, particularly relative to the file size of bitmap images. The same circle as a bitmap file, at a resolution of 320x200, might look something like this in English:

· Pixel 1x1 is white

· Pixel 2x1 is white

· Pixel 3x1 is white

· Pixel 4x1 is white, etc. until we reach Pixel 320x1

· Pixel 1x2 is white

· Pixel 2x2 is white, etc.

Describing the circle (and the color surrounding it) on a pixel-by-pixel basis is a much more lengthy process than telling the computer to draw the circle itself.

Another major benefit of vector graphics is scalability. Because the computer effectively draws the image for us, vector graphics are also scalable, meaning the size of the image can be increased or decreased without degradation. Because the file is an equation, placing different numbers into the equation results in the computer rendering the image correctly, but if you only modify the scale, the file size remains the same.

(Figure 1.2)

Scaling vectors results in perfectly rendered images. The image on the left is the ball in its original size. The image on the right is the same ball with an increase in scale. The file size is the same.

Bitmaps can be scaled, but an increase in scale degrades the image because the computer does not have enough information to create the new image. The computer merely takes the existing pixel information and translates one pixel into multiple pixels. For example, if we scale a 45x45 image to 90x90, each individual pixel in the image in its original state becomes four (4) pixels in its scaled state. This results in jagged edges that appear fuzzy on screen. 

(Figure 1.3)Doubling the size of the bitmap causes the computer to replace each original pixel with four.  As a result,the image becomes fuzzy or jagged.  The file size also increases.