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
- Does not lose any information when saving
- Works with all the different numbers of colors (256, 16 bit, 24 bit, grayscale)
- A Compressed file (smaller file size, especially 256 color files)
- Widely compatible
- Takes very little time to de-compress overall

.JPG - Joint Photographic Expert Group (Pronounced JAYPEG)
- Great for email and websites!
- Loses information. But you do have control when you save it how much information is lost
- Only works with 24 bit colors (16 million)
- A highly compressed file (very small files)
- Widely compatible
- Takes longer to de-compress than PNGs
- Also puts a higher load onto the processor to de-compress

.BMP - Windows Bitmap
- Great for windows wallpaper but little else
- Does not lose any information
- Works with all the different number of colors
- Can be compressed but not 24 bit colors. Very BIG files
- Widely compatible
- Very fast to load and display

.GIF - Graphics Interchange Format
- Great for web pages
- Loses information as it can only have a maximum of 256 colors
- Only works with 256 colors
- Compressed format
- Widely compatible
- Doesn't take anytime to de-compress as it's not compressed

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.

QUIZ: BITMAPPED VS. VECTOR
TOP | LEARN SVG


Powered by BYC