Vector vs. Bitmap – What’s the Difference?

A Basic Understanding of Bitmap and Vector Graphics.

There are a few basic design fundamentals that are commonly under estimated and misunderstood.  A great example of this happens to be the difference between Vector objects and Bitmap graphic.

I’ll try to explain a few of the basic differences between these two graphic types, a good thing to note right away is that when we refer to Bitmap and Vector graphics, we’re not referring to any particular file format or extension.  I’ll start by giving a definition for both Bitmap and Vector, followed by a couple helpful hints when using Photoshop and Illustrator.

Vector Objects

Technically Vector objects consist of points, lines, and curves which, when combined, can form complex objects that are defined by mathematical statements and each have individual properties assigned to them such as color, gradients, fill and patterns.

One key difference is that the object-based editing software used to create Vector objects saves instructions on how the image should be drawn, rather than how it looks.  The biggest benefit for using Vector graphics is that it can be output to the highest quality resolution at any scale. It is impossible to recreate the detail from a photograph with Vector objects but the scaling flexibility is a great trade off.

A few common vector software formats include Adobe Illustrator, Adobe Flash and Inkscape (which is Open Source).

Bitmap Graphics (or Raster)

Bitmap graphics are made up with many tiny images (refereed to as pixels or “bits”) on a grid.  Each pixel contains the color information for the image.

Bitmap graphics cannot be re-sized without losing image quality. Common bitmap-based formats are JPEG, GIF, TIFF, PNG, PICT.  Bitmap graphics are the most common graphic format in use on the web.  Bitmap images tend to have much large file sizes than vector objects.

Great for photographic images, shading and gradient effects where there are thousands of different colors being used.  Computers are capable of making Bitmap images smaller by reducing the amount pixels, but can not then make the image larger without there being quite pixilated.

Hope this helps!

  1. You really make it seem so easy with your presentation but I find this matter to be really something which I think I would never understand.
    It seems too complicated and extremely broad for me.

    I’m looking forward for your next post, I will try to get the hang of it!