TutorialsRoom.com, Where knowledge lands

Bitmap Vs. Vector Graphics

bitmap_vector (1K)
There are so many image formats but they are generally divided into two main categories: Bitmap (or Raster) and Vector. So what is the differences, advantages and disadvantages of the two formats?

Bitmap Graphics:

They are what you see most of the time. Like images you take with your digital camera, images you scan with your scanner and most of the images you see on the web. Bitmap formats include: jpg, bmp, gif, png and? tiff. The bitmap file structure is just what its name says: It consists of a map of bits. The image is a collection of info about very small dots (pixels): their location, color, brightness... etc. How the info is presented is the difference between the file formats but they all share the same idea of a bitmap.

If use your pin to draw dots and try to form a circle, you'll get the idea. The fact that those dots are very small is what makes us unable to see them, instead we see the whole image not dots but if you try to enlarge (or zoom in) a jpg you'll see the dots:

brown eye brown eye
What I have done here is zooming in an image, something like enlarging the dots (pixels) that form the picture and it's clear now specially in the eyes area.

When you enlarge an image using imaging software (like Adobe Photoshop), the program doesn't just rescale the pixels (so it doesn't look as bad as the above example) instead it tries to predict or guess the new pixels to add in order to fill in the spaces you made when you enlarged the image using many techniques like simulating the nearest available dot or better getting info from all the dots surrounding the new dot to guess what it looks like:

brown eye enlareged

As you see it is better than just zooming in but now it looks blurry because of the dots that the program had to insert to get the new size. Needless to say that rescaling or even zooming an image to a smaller size won't be a problem at all. It fact it mostly will look sharper.

Converting between the different bitmap formats is really easy. It is just opening the image file and choosing Save As. Like when you convert bmp to jpg. It is so easy because they are all bit maps.

Vector Graphics:

Vector Graphics are completely different from bitmaps. Rather than a collection of dots, vector images are mathematical formulas. Think about it like instead of remembering all the dots of a circle (in a bitmap format) you just say: a circle with a 3 units radius, I think you get the idea now.The formats include: ai, cdr, dxf, emf, svg and swf.

Because of the nature of vector graphics, they generally have smaller file size than bitmaps (just formulas not info about every dot in the image). They are so easy resizing. Like in the above example to double the circle size, the software just has to modify the formula from a circle with 3 units radius; to a circle with 6 units radius and you'll get very sharp new image without any loss in quality and in a double size. Fonts are a good example of vector graphics no matter how you enlarge your font, it will look very sharp.

Because they are just mathematical formulas, vector drawings cannot be as good as bitmaps when you need; much details of shades that is why they could be used for your company logo but for pictures of people it won't be as good as bitmaps and it will mostly look like cartoons.

Converting from a vector to a bitmap is generally much easier than the opposite. To convert from bitmap to vector, you need something like tracing. It is almost like; drawing over the bitmap to get a vector. Some software exist to help you accomplish this task like in Adobe Illustrator CS2 but you will have to do some work to get better results. It will never be a matter of opening the jpg image and Save As Illustrator ai file.

Some file formats could have both raster (bitmap) and vector like pdf, pgm and emps.

More Useful Tutorials

Learn How to Make a Metal Plaque in Photoshop
Create an aged, grungy metal plaque. Use for journaling, title or embellishment on your digital projects.

Personal Portfolio Layout #2
Stand out from the crowd with this dark, unique looking personal portfolio layout.

Adobe Photoshop Cs3 Tools Palette With Keyboard Shortcuts
The Tools palette layout contains 60 separate tools. Double-clicking any tool will automatically display the Tool options palette and from there you can select individual options for that tool.

Current Comments (2)

aly Said,
Sat, 08 September 2007 13:37pm (GMT)

THANKES

me Said,
Wed, 06 August 2008 23:53pm (GMT)

thanks for givin me my project answers


Leave Your Comment (English Only Please)


(Required)


(Optional, will not be shown in public)


(Including http:// - Optional)



Type the sum of 5 + 3 (Required)


Copyright © 2007-2008 Hazem Osman. All rights reserved. Terms & Conditions