Industry guru Dave Taylor offers tech support on technical and business topics, including iPhone, iPod, Microsoft Windows, Sony PSP, cellphones, online advertising, CSS, Web design, business, Unix, Linux, SEO, Mac OS X, and shell script programming.     


What's the difference between a vector and bitmap graphic?

Recently I asked a friend if I could have a copy of a cartoon graphic on his site. He asked me if I wanted it in "vector or bitmap format". I thought the formats were things like .gif and .jpg. What do "vector" and "bitmap" mean?


Dave's Answer:

It can be broken down like this: A vector format image is a drawing. A bitmap format image is a photo.

How does that work out? Well, when you draw, what do you do? You draw lines, make them different thicknesses, and then color them in. But when you shoot a photo, you expose a piece of film to light, and millions of tiny grains on the film register the light, creating a grid of dots that are so close together, it looks like a photo instead of a bunch of dots.

Formats like .gif and .jpg are bitmap formats. That means that they're basically using different organizing and compressing methods to store a grid of colored dots. But vector formats like .svg and .wmf are storing sets of instructions on how to draw the picture again ("draw a blue line here, draw a red circle there").

There are advantages to each. Vector formats can generally be stretched to various sizes without losing quality, but they're terrible for photos because even a small 100 x 100 thumbnail photo has 10,000 dots in it. If you tried to define each dot as a colored circle or square, you'd get a really huge file that took forever to turn from that set of instructions back into a picture.

Bitmap formats are really easy to use for photos and are fast to display because your monitor is already just a grid of colored dots, so to display them, you're just changing the color of the dots that are already there. But if you try to stretch a bitmap, you just make all those dots in the photo bigger than the dots on your screen and the photos get fuzzy and blotchy.

If you're going to use a vector image on a web site, you generally need to convert it to a bitmap image, because web browsers handle bitmap images much better. On the other hand, you have a lot more freedom in terms of the final size of that image, because you're starting from something that's easier to stretch.

So in short:

Vector Format: Great for drawings, bad for photos, bad for the web, easy to stretch, easy to convert to bitmap.

Bitmap Format: Okay for drawings, great for photos, best for the web, hard to stretch, hard to convert to vector.

Thanks to Greg Bulmash who offers lots of clip art for his help with this entry.


More Useful Computer and Internet Basics Articles:
✔   How do I blur my house on Google Maps Street View?
I was poking around on Google Maps looking at satellite views of my neighborhood and when I switched to street view, was upset...
✔   Create a custom vanity URL for Kickstarter?
I was reading some updates on Twitter and saw someone had posted a URL that would let me see what projects they'd backed...
✔   Export or Save Subscription List from Google Reader?
Just heard that Google Reader is going away this summer. That stinks! How am I supposed to read my RSS feeds? More importantly,...
✔   Shrink or Reduce a Photo File Size on Mac?
I'm trying to upload some photos to a social media site and it's complaining that they're too big. They are, as they come...
✔   Can I organize my Yahoo Mail with folders?
I've been on Yahoo Mail for years and while most of my friends are now on Gmail or their own Web-based email programs,...

Let's stay in touch!
Sign up for my weekly AskDaveTaylor Newsletter and you'll receive even more tech and gadget help right to your inbox, along with exclusive news and industry updates. It's good stuff. I promise!
    Enter your name: and your email addr:  





Categorized: Computer and Internet Basics   (Article 7387, Written by )
Tagged: bitmap graphics, graphics, vector graphics
Previous: How do I migrate from NewsGator Online to Google Reader?
Next: How do I change the default page view in Google Reader?




Reader Comments To Date: 2

Julian said, on February 25, 2010 3:17 AM:

Thanks for the answer it really helped our ICT work Dave!

sam said, on November 10, 2010 5:12 PM:

i don't think that the bitmap is much better than vector,,, i guess that's an hypocrite conclusion!!i hope you don't mind my opinion,

Starbucks coffee cup I do have a lot to say, and questions of my own for that matter, but first I'd like to say thank you, Dave, for all your helpful information by buying you a cup of coffee!

I do have a comment, now that you mention it!











I will never send you any unsolicited email. Ever.






Check This Out Too...

 
Look for Answers
Need Help? Ask Dave Taylor!


Follow Me on Pinterest

Find Me on Google+
ADT on G+
© 2002 - 2013 by Dave Taylor. All Rights Reserved.

Note: This web site is for the purpose of disseminating information for educational purposes, free of charge, for the benefit of all visitors. We take great care to provide quality information. However, we do not guarantee, and accept no legal liability whatsoever arising from or connected to, the accuracy, reliability, currency or completeness of any material contained on this web site or on any linked site. Further, please note that by submitting a question or comment you're agreeing to my terms of service, which are: you relinquish any subsequent rights of ownership to your material by submitting it on this site. My lawyer says "Thanks".
"Ask Dave Taylor®" is a registered trademark of Intuitive Systems, LLC.