Vector vs Bitmap

What are vector and bitmap images, and how are they different?

Examples of bitmap and raster images.
A Bitmap Image--shown zoomed in with the original size in the upper right corner. Notice the individual pixels that make up the image. View Full Size.

Sue Chastain

Bitmap and vector are two types of images you might find available online or as a supported image type in graphics software. In fact, it's almost impossible to discuss graphics programs without first establishing an understanding of the differences between these two major 2D graphics types.

While both are image types and used for a similar purpose, they work fundamentally differently when you examine them closely.

Facts About Bitmap Images

Bitmap images (also known as raster images) are made up of pixels in a grid. Pixels are picture elements; tiny squares of individual color that make up what you see on your screen. All of these tiny squares of color come together to form the images you see.

Computer monitors display pixels, and the actual number depends on your monitor and screen settings. The smartphone in your pocket can display up to several times as many pixels as your desktop monitor.

For example, the icons on your desktop are typically 32x32 pixels, meaning that there are 32 dots of color going in each direction. When combined, these tiny dots form an image.

If you were to enlarge one of these icons, you'd begin to clearly see each individual square dot of color. Note that white areas of the background are still individual pixels, even though they appear to be one solid color.

All scanned images are bitmaps, and all images from digital cameras are bitmaps.

Bitmap Resolution

Bitmap images are resolution dependent. Resolution refers to the number of pixels in an image and is usually stated as DPI (dots per inch) or PPI (pixels per inch). Bitmap images are approximately 100 PPI.

However, when printing bitmaps, your printer needs much more image data than a monitor. In order to render a bitmap image accurately, the typical desktop printer needs 150–300 PPI . If you've ever wondered why your 300 DIP scanned image appears so much larger on your monitor, this is why. 

Resizing Bitmap Images

Because bitmaps are resolution dependent, it's impossible to increase or decrease their size without sacrificing a degree of image quality. When you reduce the size of a bitmap image through your software's resample or resize option, pixels must be discarded.

When you increase the size of a bitmap image, the software has to create new pixels. When creating pixels, the software has to estimate the color values of the new pixels based on the surrounding pixels. This process is called interpolation.

Let's assume you have a red pixel and a blue pixel beside each other. If you double the resolution you will be adding two pixels between them. What color will those new pixels be? Interpolation is the decision process that determines which color those added pixels will be; the computer is adding what it thinks are the correct colors.

Scaling an image does not affect the image permanently. In other words, it doesn't change the number of pixels in the image. What it does is make them bigger. However, if you scale a bitmap image to a larger size in your page layout software, you're going to see a definite jagged appearance. Even if you don't see it on your screen, it will be very apparent in the printed image.

Scaling a bitmap image to a smaller size doesn't have any effect. In fact, when you do this you're effectively increasing the PPI of the image so that it will print clearer. This happens because it still has the same number of pixels but in a smaller area.

Bitmap Image Software and File Formats

Popular bitmap editing programs include Microsoft Paint, Adobe Photoshop, Corel Photo-Paint, Corel Paint Shop Pro, and GIMP.

Common bitmap formats include GIF, JPG, PNG, TIFF, and PSD. Converting between bitmap formats is generally as simple as opening the image in an image editor or viewer and then choosing a new format from program's Save As or Export option.

Bitmaps and Transparency

Bitmap images, in general, do not inherently support transparency. A couple of specific formats, namely GIF and PNG, support transparency.

In addition, most image editing programs support transparency, but only when the image is saved in the software program's native format.

A common misconception is that the transparent areas in an image will remain transparent when an image is saved to another format, or copied and pasted into another program. That doesn't work, but there are techniques for hiding or blocking out areas in a bitmap that you intend to use in other software.

Facts About Vector Images

Although not as commonly used as bitmap graphics, vector graphics have a lot of virtues. Vector images are made up of many individuals, scalable objects.

These objects are defined by mathematical equations, called Bezier Curves, rather than pixels, so they always render at the highest quality because they are device-independent. Objects in a vector image might consist of lines, curves, and shapes with editable attributes such as color, fill, and outline.

Changing the attributes of a vector object does not affect the object itself. You can freely change any number of object attributes without destroying the basic object. An object can be modified not only by changing its attributes but also by shaping and transforming it using nodes and control handles.

Fonts are one type of vector object. You can see an example of the data behind a vector image in this explanation of an SVG file.

Advantages of Vector Images

Because they're scalable, vector-based images are resolution independent. You can increase and decrease the size of vector images to any degree and your lines will remain crisp and sharp, both on screen and in print.

Another advantage of vector images is that they're not restricted to a rectangular shape like bitmaps. Vector objects can be placed over other objects, and the object below will show through. A vector circle and bitmap circle appear to be exactly the same when seen on a white background, but when you place the bitmap circle over another color, it has a rectangular box around it from the white pixels in the image.

Disadvantages of Vector Images

Vector images have many advantages, but the primary disadvantage is that they're unsuitable for producing photo-realistic imagery. Vector images are usually made up of solid areas of color or gradients, but they cannot depict the continuous subtle tones of a photograph. That's why most of the vector images you see tend to have a cartoon-like appearance.

Even so, vector graphics are continually becoming more advanced. Today's vector tools allow you to apply bitmapped textures to objects, giving them a photo-realistic appearance, and you can now create soft blends, transparency, and shading that once was difficult to achieve in vector drawing programs.

Rasterizing Vector Images

Vector images primarily originate from software. You can't scan an image and save it as a vector file without using special conversion software. On the other hand, vector images can easily be converted to bitmaps. This process is called rasterizing.

When you convert a vector image to a bitmap, you can specify the output resolution of the final bitmap for whatever size you need. It's always important to save a copy of your original vector artwork in its native format before converting it to a bitmap; once it has been converted to a bitmap, the image loses all the wonderful qualities it had in its vector state.

If you convert a vector to a bitmap 100 by 100 pixels and then decide you need the image to be larger, you'll need to go back to the original vector file and export the image again. Also, keep in mind that opening a vector image in a bitmap editing program usually destroys the vector qualities of the image and converts it to raster data.

The most common reason for wanting to convert a vector to a bitmap would be for use on the web. The most common and accepted format for vector images on the web is Scalable Vector Graphics (SVG).

Due to the nature of vector images, they're best converted to GIF or PNG format for use on the web. This is slowly changing because many modern browsers are able to render SVG images.

Vector Image Software and File Formats

Popular vector drawing programs include Adobe Illustrator, CorelDRAW, and Inkscape.

Metafiles are graphics that contain both raster and vector data. For example, a vector image that contains an object which has a bitmap pattern applied as a fill would be a metafile. The object is still a vector, but the fill attribute consists of bitmap data.

Common vector formats include AI, CDR, CMX (Corel Metafile Exchange Image), SVG, CGM (Computer Graphics Metafile), DXF, and WMF (Windows Metafile). Common metafile formats include EPS, PDF, and PICT.