BITMAP VS VECTOR
What is a bitmapped image?
A bitmap (also called "raster") graphic is created from rows of
different colored pixels that together form an image. In their simplest form,
bitmaps have only two colors, with each pixel being either black or white. With
increasing complexity, an image can include more colors; photograph-quality
images may have millions. Examples of bitmap graphic formats include GIF, JPEG,
PNG, TIFF, XBM, BMP, and PCX as well as bitmap (i.e., screen) fonts. The image
displayed on a computer monitor is also a bitmap, as are the outputs of
printers, scanners, and similar devices. They are created using paint programs
like Adobe Photoshop.
One of the disadvantages of this type of
graphic is that it does not scale well. If you resize a bitmap image, you may
notice that the image quality suffers. To understand why this happens, you need
to realize what it means for an image to be composed of pixels. If you open a
bitmap graphic in an application such as Photoshop and begin to zoom in on the
image, you will probably notice that the image is broken down into smaller
squares at around 300-400%. Keep zooming in and this will become more apparent.
Each of these little blocks is a pixel and can contain only 1 color. Because a
pixel takes up a visible amount of space and can only be filled with 1 color,
you can imagine that some special process must be in effect to create the
illusion of smooth transitions between colors. This is a dithering technique
called anti-aliasing that attempts to give the illusion of smooth blends between
colors as well as to diminish the jagged effects of curves and diagonal lines.
When scanning graphics into applications that deal with bitmap data only, make
sure that you scan the image in at the exact size that you need. This will
prevent you from having to resize the image and compromise the quality.
Below is a table explaining some of the basic bitmap files and their uses:
|
.PNG
- Portable Network Graphic |
|
.JPG
- Joint Photographic Expert Group (Pronounced JAYPEG) |
|
.BMP
- Windows Bitmap |
|
.GIF
- Graphics Interchange Format |
What is a vector image?
Vector (also known as "object-oriented") graphics are constructed
using mathematical formulas describing shapes, colors, and placement. Rather
than a grid of pixels, a vector graphic consists of shapes, curves, lines, and
text which together make a picture. While a bitmap image contains information
about the color of each pixel, a vector graphic contains instructions about
where to place each of the components. It is even possible to embed a bitmap
graphic within a vector graphic, which is how vector-bitmap hybrid graphics
work. It is not possible, however, to embed vector information within a bitmap.
Examples of vector graphic formats are PICT, EPS, and WMF as well as PostScript
and TrueType fonts. These are created with GIS and CAD applications as well as
drawing programs like FreeHand.
Vector graphics do not
use pixels and are based on mathematical formulas that represent curves and
lines. Vector graphics are very smooth looking and can easily be resized without
loss of image quality. This is not a math tutorial so we will try not to go too
in depth, however, the following example may clear up what makes vector graphics
so sharp and scalable.
Let's say that we draw a line that is represented by the equation 3x+2y-13=0. In
order to double the size of that line, we would multiply the equation by 2 as
follows 2(3x+2y-13=0). This should create a line that is 2x the size of the
original and is based entirely on math and doesn't use pixels which means that
there is no need for the application to use a dithering effect to give the
appearance that the line is perfectly smooth... It already is.
Differences between bitmapped and vector
|
|
|
|
Bitmap |
Vector |
As described below, bitmap and vector graphics both have their strengths and weaknesses:
In general, a bitmap graphic is much larger than a similar vector graphic.
Bitmap graphics are affected by resolution. If you enlarge a bitmap graphic, it will look jagged. When shrunk, its features become indistinct and fuzzy. This does not happen with vector graphics as their shapes are redrawn to compensate for changes in resolution.
Altering vector graphics is easy because the shapes within them can be ungrouped and edited individually. However, vector graphics are difficult to modify or even display when they are not opened in programs that understand their rendering languages. For example, while many Mac OS drawing programs easily display and edit PICT files, few are able to do anything at all with WMF files. Most paint applications, however, are capable of opening many different kinds of bitmap graphic formats.
You can easily convert one kind of bitmap file into another. You can also convert a vector graphic into a bitmap. However, it is very difficult to convert a bitmap graphic into a true vector graphic. It is even more difficult to convert one kind of vector graphic into another (e.g., PICT to WMF).
Vector graphics are not appropriate for complex images (e.g., digitized photographs).
File size comparison
When comparing graphics files, one of the most important features for
all of us is file size. Whether we decide to use the graphic on the
internet for a webpage or to send a picture of a loved one across the
internet it is imperative that the file size is small. Below is a SVG
image created by Chester Militante that we will use to compare file sizes:
Click the image for SVG version. Must have Internet Explorer 6.0 with
Adobe SVG Viewer 3.02.
| File type | File size |
| SVG | 871 bytes |
| JPG | 12.6 Kbytes |
| GIF | 14.1 Kbytes |
| AI | 142 Kbytes |
| BMP | 1.05 Mb |
The results from the table above show that SVG clearly has an advantage over all other bitmap and vector based graphics. JPG's compression technique has shown that it can compete with other graphic types by having the 2nd smallest file size. The one file size that stands out is the AI file which is vector based - but our conversion technique for this file type is not something proven thus this is potentially why this discrepancy occurred.
Powered by BYC