Bitmaps and Vector Graphics

Introduction
Difference Between Bitmaps and Vector Graphics
File Formats
Converting File Formats
Some Applications

Introduction

Have you wondered why some pictures show jaggies on the edges when they are resized larger. Or why some pictures don't show jaggies when enlarged? Figures 1 and 2 show how they differ.

Figure 1: Resized Vector Graphic

Figure 2: Resized Bitmap Graphic

Those jaggies have more to do with the type of graphics you're resizing, and broadly speaking, there are two types of computer graphics: bitmaps and vector graphics. If you use graphics often, understanding these two formats, their differences, and how they are created is essential.

To put in a nutshell, bitmap graphics get the jaggies when they are resized. And vector graphics can be resized to any extent without the pixelated jaggies.

Difference Between Bitmaps and Vector Graphics

The difference between bitmaps and vector graphics stems more from what they're made up of:

• Bitmap graphics are made up of group of small dots called pixels.
• Vector graphics are made up of lines, curves, and fills.

Bitmap graphics, also known as "raster graphics," are composed of very small dots of the same or different color that are placed so closely to each other that the human eye perceives them not as dots, but as a picture. A photograph is a example of a bitmap graphic. All photographs from digital cameras or scans made into the computer from a scanner are bitmaps--and they are all entirely composed of these pixel dots. Bitmaps can also be designs created from scratch in an image editor and paint program. Each bitmap has a fixed size. Resize it larger and you'll notice pixelation in the graphic as you can see in Figure 3 below.

Figure 3: Inset 1 is the actual image while 2 and 3 are enlarged images that show pixelation

Vector graphics don't look like photographs at all. In fact, they look more like illustrations. A logo is an example of a vector graphic. Vector graphics are also known as "object-oriented" or " drawing" graphics.

Rather than a collection of dots, vector graphics are a collection of graphic elements like lines, squares, rectangles, or circles. Each element in a vector graphic has its own coordinates that can be manipulated and resized individually without distortion since the computer just increases the coordinate values proportionately. It's quite like increasing a proprtion in a recipe! Fortunately, these resizing manipulations don't effect the quality of a vector graphic. Figure 1 above shows you how vector graphics can be resized without loss of quality.

File Formats

There are many different graphic file formats out there for both bitmaps and vector graphics. Here are some of the common file formats in the graphic design world:

Common bitmap file formats include:

• BMP - Windows Bitmap
• JPEG - Also known as JPG
• JPEG 2000 - A higher quality variant of JPEG
• TIFF - Used mainly in the print industry
• GIF - Used as web graphics and also has an animated variant.
• TGA - Targa, an old bitmap format, not too common these days
• PNG - An efficient file format that was supposed to replace GIF
• PSD - The native file format of Adobe Photoshop, the most omnipresent image editor on the planet
• PICT - A Macintosh bitmap format

Common vector graphics file formats include:

• EPS - Encapsulated PostScript, an industry vector standard
• WMF - Windows Metafile
• EMF - Enhanced Windows Metafile
• AI - The Adobe Illustrator file format
• CDR - The CorelDRAW file format
• WPG - The WordPerfect Graphic file format, not too common these days.
• SWF - Actually, an animation format that uses vectors.
• SVG - Scalable Vector Graphic

Converting File Formats

Conversions between file formats are commonplace, although these conversions are mainly successful only between bitmaps and bitmaps (or between vectors and vectors).

Vector to bitmap conversions are also common, but the other way round is not too common, mainly because it's not possible unless you use a tracing program like Adobe Streamline or CorelTRACE, or the tracing abilities in Adobe Illustrator. Even then, results are time-consuming and not too great unless you are ready to spend time and experiment with the results.

Some Applications

Here are some applications that are used to create and edit bitmaps and vector graphics. Many of them can also convert from one format to the other.

Bitmap Programs

• Adobe Photoshop, and Adobe Photoshop Elements
• Adobe Fireworks
• Corel Paint Shop Pro, PHOTOPAINT, and Painter
• Microsoft Digital Image Pro
• Ulead PhotoImpact
• IrfanView

Vector Graphics Programs

• Adobe Illustrator
• CorelDRAW
• Microsoft Expression
• Xara Xtreme
• Adobe Flash