A simple guide to understanding Vector and Bitmap (Raster) graphics

Written By 2007-03-19 12 No tags Permalink 0

I was surprised at the poor results Google returned when I searched for “difference between vector and bitmap” on Google.com. Every single first-page results were either not clear enough, lacked the proper visuals for explanation, or were too complicated (such as discussing the file size and performance ratio for vector and bitmap files). So, for once and for all, I will define on the internet, what the difference between vector and bitmap images are.

1. Bitmap Images (also known as Raster Images)

Bitmaps are the more common type of images that you see on the web. Bitmaps are a map of bits, literally. It defines the color of each dot as it goes across and down a photo.

Red Red Red Red Green Green Green Red
Red Red Red Red Blue Blue Blue Red
Red Red Red Red Green Blue Green Red

Would produce an image like this (I put the white lines in just so you can see properly, but they don’t actually exist) :

how-the-map-works.jpg

This is perfectly fine for computer monitors because they define the screen’s display by pixels, so each of these cells constitute 1 pixel. Screen resolution is usually 72~96 DPI (dots per inch).

Here’s what happens when you enlarge a bitmap image. Because they are simply dots after dots in a sequence, the dots become visible and the image blurs.

bitmap.jpg

2. Vector Graphics

Vector graphics do not rely on dots, but instead, rely on the actual math of it. This is basically how a Vector graphic file is written, in plain english :

Anchor 00001 starts at point 100 from top, 100 from left. This anchor has no curvature.
Anchor 00002 connects to Anchor 00001, and is located at 50 from top, and 200 from left, and has a curvature of 50, in a 0 degree angle.
Anchor 00003 connects to Anchor 00002 and 00001, and is located at 100 from top and 280 from left, and has no curvature.
Anchors 00001~00003 constitute a filled shape aaa and the fill color is red. It has no stroke.

This will show you something similar to this (once again note that the blue lines don’t exist – they are there to show you the angles and locations etc) :

how-vector-math-works.jpg

So, as you can imagine, when Vector files are enlarged, they still look just as clear and crisp. There are no dots that emulate the shape – the shape is physically defined!!!

vector.jpg

How should they be used?

Bitmap and Vector have their place. Vector takes longer to calculate and process to show on the screen, and is more complicated to make. Also, note that due to the nature of the images, real photos cannot be vectorized whatsoever. Because of the complexity of the image, vectorizing it would only result in a bunch of dots after dots – which is in essence, a bitmap image anyhow. Vector graphics are used for simpler shapes, or simplified photos (like that daisy above) and is great for logos. Also, all text for print should be vector, so that they do not show jagged edges when they are printed. In short, anything that needs to be printed (which has a much higher resolution than the computer screen) MUST be in vector format (with the exception, of course, of the embedded photos and images, which should be at 300 DPI for optimal results).

Adobe Illustrator is what I use to generate vector graphics (note this tutorial using Illustrator’s live trace feature). The file formats can be AI, PDF, EPS. My recommendation is PDFs (make sure you turn on the “Preserve Illustrator Editability” when you save it).

Bitmap is used for photograhpy, and the web. To show things on the internet, or on computers, things need to be in bitmap. Even on print, the photos are still in bitmap because it’s simply impossible to vectorize a real photo without quality loss. Any major file formats used on the internet (jpg, gif, png) are all bitmap files, and my primary tool for editing these is Adobe Photoshop.

  • NewBie

    This does make it easier to understand..

    So when you print brochures, they are a blend of vector and bitmap paths, correct?

  • i think that as soon as possible it will be cover u do not have a need to worry about it , because every thing is possible in this world.

  • Antony Bosley

    Hi jeff my name is Antony Bosley, and i am studying ICT and vector/bitmap software at college would it be alright for me two use your four images as examples in one of my assignments? could you please reply to this comment or E-mail me at bozley_29@hotmail.co.uk look forward to your reply

    kinds regards Antony Bosley

  • Antony

    hi jeff my name is Antony and i am studying vector and bitmap images at college, could i please use your images for one of my assignments you can contact me at bosley_29@hotmail.co.uk or jfaa101p31.shud@abingdon-witney.ac.uk look forward to your reply
    antony bosley

  • Hey antony, feel free to do so!

  • Amber Rapp

    Hi Jeff:) My name is Amber, and I am a student at the Art Institute. I am writing an essay comparing vector and bitmap images, and I was wondering if I could use your images as examples in my essay? It would be greatly appreciated:)
    Thank You,
    Amber

  • Feel free to do so! 🙂

  • Alex

    Hi Jeff, my names alex, same as the two above, i study digital art at college, and i was wondering if I could also use the two images of the flowers in a essay that im writing at the moment, would be much appreciated.

    Thanks

    Alex

  • khizar

    what are the common things of vector and rastor imeges.

  • Lindel

    I am working on an assignment to compare vector and Bitmap can I use your example here to explain my point What are some of the smilarities of the two

  • Pingback: Startseite()

  • Pingback: total stranger()

  • Pingback: banning()

  • Pingback: cigarette electronique()

  • Pingback: cheap car insurance()

  • Pingback: Revival of Jeffkee.com()

  • I read a lot of interesting articles here. Probably you spend a lot
    of time writing, i know how to save you a lot of work, there is an online tool that creates high quality, SEO friendly posts in seconds, just type in google – laranitas free content source

  • Susan Lane

    Very nice guide, it’s very informative! I first learned about vector from this http://www.coreldraw.com/en/pages/raster-to-vector/ but I didn’t know about all the differences and benefits, thanks a lot!