Vector versus Bitmap

Vector graphics create digital images through a sequence of commands or mathematical statements that place points, lines, and shapes in a given two-dimensional or three-dimensional space.

Rather than taking a picture of what an object looks like, vector graphics describe the object, its limits, and its properties in a mathematical way. There is no image information, just the description. For example, instead of containing one byte in the file for each bit of a line drawing, a vector graphic file describes a series of points to be connected.

The vector description procedure has major advantages, such as smaller file size and scalability. A vector object can be scaled without loss of quality, since only the scale is changed and the resulting image rendered at the time of display. To visualize this, let's look at the differences when scaling a vector image or a bitmap image:

Our example uses fonts, which are nothing else than a kind of image. In the original both seem to look good:

Vector	Bitmap

The differences become obvious when we scale the object. Let's look at the same text at 300% magnification:

Vector	Bitmap

We can see clearly that the vector-based object scaled without any loss in quality. The Bitmap, however, is scaled without any adjustment of the pixels and what used to be 1 pixel now is an area of 3x3 pixels of the same color.

Fireworks uses vectors to describe geometrical objects and fonts. Internally the vector image is converted into a raster graphics image when it is mapped to the display space, the monitor. This process is called rendering.

Bitmap images are just like a TV picture, in which every little point in a larger raster is mapped with a color. The resolution of the image is according to the size of the raster and is usually measured in dpi, dots per inch. The usual screen resolution is 72 ppi and most web graphics are geared towards that resolution. Higher resolution only increases the file size and does not increase the quality of the picture. Lately there are some screens that display 96 ppi, we can export at that resolution without increasing the file size significantly.

The fixed raster causes problems when sizing the image, especially when zooming in. It is like looking at the TV screen through a magnifying glass.

Where does Fireworks use vectors?

All objects you create in Fireworks with vector tools are vector objects, bitmaps can be created using the available bitmap tools. A conversion of a bitmap into a vector object is not possible. Sometimes it is necessary to convert a vector object to a bitmap in order to apply certain effects.

Fireworks attaches properties to the vector objects, such as stroke, fill, or live effects. Fireworks displays these objects the way they will look in the exported raster graphic, but they are always editable and scalable.

Although all images will be converted upon export to a bitmap format, it is important that we have freely scalable objects that retain their quality no matter to what degree they are scaled or skewed. The importance becomes clear when we need to edit graphics after having exported the raster graphics.

In the next chapter we will familiarize ourselves with the panels and windows of Fireworks.