What’s the difference between vector and bitmap (rasterized) images?

Difference between vector and bitmap imagesThere are two types of images that you’ll need to understand as you get deeper into website design and graphic design: vector images and bitmap (rasterized) images.

Under normal conditions, one usually cannot tell the difference between a vector and a bitmap image. It’s only upon closer inspection that you can actually see those differences. But more importantly, it’s what vector images and bitmap (rasterized) images are that will allow you to use them correctly in graphic design.

Bitmap (rasterized) images

The data of a bitmap image (a.k.a. rasterized image) is saved using a “grid system”. Each and every pixel in a bitmap image has a location on an X/Y coordinate system:

Bitmap image grid coordinates

In addition, the color value at each pixel location is also saved. Because of this, bitmap files can be extremely large. Bitmap images are perfect for photographs since all of the color data is accurately saved.

Here are some common bitmap file extensions:

  • BMP
  • GIF
  • JPG, JPEG
  • PNG
  • PICT (Macintosh)
  • PCX
  • TIFF
  • PSD (Adobe Photoshop)

Vector images

The data of a vector image is saved using geometrical primitives such as points, lines, curves, and shapes or polygons, which are all based on mathematical equations. Because of this, vector image files are much smaller than bitmap image files.

The downside to vector images is that they are horrible for photographs, since much of the detail is lost. Vector images are best for clipart and logos. (Sorry for not having an example of a vector image, but it’s hard to display an image of a bunch of mathematical equations! ;) )

Here are some common vector image file extensions:

  • AI (Adobe Illustrator)
  • EPS (Encapsulated PostScript)
  • CDR (CorelDRAW)
  • CGM (Computer Graphics Metafile)
  • WMF (Windows Metafile)
  • SWF (Shockwave Flash)

Resizing bitmap images

Take a look at the following bitmap image:

flower

Now, if we try to enlarge this bitmap image, we’ll get this result (it’s only a partial image):

Rasterized bitmap flower image

When you enlarge a bitmap image all you’ll get are jagged lines — making bitmap images a minor headache to resize (see the post In Photoshop, go from big to small for some tips on how to decrease the head-throbbing.)

Resizing vector images

On the other hand, vector images — being based solely on mathematical equations — can be resized as much or as little as you like without losing any detail:

Vector flower image

Final thoughts

If you are designing for the web, then you will have to use some form of bitmap image (JPG, GIF, or PNG) in your final draft. But during the design process, you are free to use vector images until they are ready for the web. Photoshop has the ability to “rasterize” a vector image (changing a vector image to a bitmap image) by right clicking on a vector layer and choosing “Rasterize Layer” from the menu.

If you enjoyed this post, then how about sharing it
with your friends using these services? Thanks!



3 Responses:

  1. Eric

    I found this file on my computer a while ago with the .eps extension. Couldn’t open it. Finally I know what it is and what software I need! ;)

    Thanks! Love your articles!

  2. Martha

    Those file extensions for vector are very informative and helpful. It makes understanding vector images and how to save them a lot simpler. thank you

  3. Cindy

    Loved the simplicity of this explanation, thank you!


Share your thoughts below: