10/02/2010 - Blogger.Iconshock

Vector vs Bitmap for dummies

Oh no! Not another vector vs bitmap article! Well… Yes. I'm afraid to tell you that I've come from a land far, far away, just to add to Google yet another post about the differences between vector type images and Bitmaps. So, why should you, dear visitor, continue reading these lines any further? What will make this article different from the rest? Well, for starters, I'm going to insert at the end of this post a hidden URL with hundreds of videos of my steamy, vicious, dirty, prolific sex life, and besides that, this article would be loaded with information so exclusive, so intelligent, so enlightening, that it will increase your credit card limit, save the Amazon rainforest and improve your digestion. How about that? Hmmm. My nose has grown so much its pushing the monitor away. Let's get things straight. I'm still in love with a girl that left me almost two years ago, so my sex life is pretty much restricted to my daily dosage of lyrics from AC-DC and The Rolling Stones… the only way to improve your credit card limit is saving as much as you can… and not even god himself can save the Amazon rainforest. Oh, and I really don't care about your digestion. So with all things cleared out, I will now proceed to write about vector and bitmap images. Of course you are free to go on and make your own steamy videos instead of reading this.
Ladybug_bv
Bitmap image enlarged to see the individual pixels
Vectorfont_Bv
A vector has the same quality overall, despite how much you rescale it.
First things first. What is a pixel? Defining a pixel is tricky, because it's a very context dependent concept. A pixel on print is not the same as a pixel on your monitor or on the tiny screen of your camera. But in general terms, a pixel or "picture element" is the minimum unit of information of an image, and corresponds to each dot of light that builds up all the shapes and colors you see on your screen. If you get very, very close to an LCD monitor, you could physically see each tiny square. These small units are arranged in a two dimensional grid alignment. A normal monitor screen has from 72 to 100 pixels per inch, while in a printing device, the pixel per inch (or dot per inch) measure correspond more closely to the "density" of dot, or in plain words, to the size of each drop of ink and it can vary somewhere between 150 to 300 pixels per inch. (There are specialized printers with up to 4800 DPI or Dots per Inch) Usually, when you talk about pixels per inch, you are referring to a display device, whereas the term dots per inch refers more to an output device. As you can tell already from these two paragraphs of confusing info, we are submerging ourselves in a world where looks can be deceiving and the common sense tends to "what you see is not what you get"... Ever read "Horton Hears a Who"? In this trip to nowhere, another concept to be acquainted with is that of image resolution. Image resolution relates to the amount of detail or density of information inside a given space. The more resolution, the more quality your image will have. The term is continuously used as an expression to describe only the dimensions of an image, leading many times to general confusion. When referring to resolution, you have to address both the image size and the dpi. The more information an image has, the bigger the file size. Image size can be expressed in width x height or as almost all current camera manufactures do, by multiplying the width x height and dividing it by a million. I believe that this "Megapixel" notation is quite misleading to the mass consumer because image dimensions alone are not a truthful indicative of image quality. Just to illustrate, the image of the new iphone camera is said to be of 3 Megapixels. The image of the HD camera Sony made for the last two Star Wars films is 2 Megapixels. That by no means is an indicative that your iphone images are going to be better than the ones you saw in Attack of the Clones. Do you get my point?
City72DPI_Bv
450x300 72 DPI
City20DPI_Bv
Same image with 20DPI. See any difference?
Now, Generally speaking, Images come in two flavors. We are talking about Bitmaps and vectors. (Bitmaps are sometimes called rasters) Bitmap images are made up from filling each individual pixel with information. For example, a completely black 4px by 4px image is made from 16 -4x4- black colored tiny squares. –pixels-
4x4_bv
A complete black square is really comprised by many black pixels
I know I'm not talking in the most technically accurate terms, but I want even my grandma to understand these basics. Vector images are quite different. In the vector universe, a completely black 10px by 10px image is made up from mathematical calculations in a couple of lines of code that describe the image in values for its location, color and size.
Vector_square_bv
Vector_spiral_bv
Two examples of vector graphics in SVG format. Notice the code is based on XML
Vector_eye_bv
Impressive example of vector graphics by Oleg Rogoznev
Bitmaps and vectors are two different ballparks with different rules. Each type of image has its own file types and associated software.
Image_formats_bv
Most common image formats and editing software
When working with Bitmap images, you don't have any limitation regarding color space because rasters support a broad range of color use, from 8bit depth (256 colors) to HDRI floating point (Almost infinite range of colors) The only restriction you have when working with bitmaps is your resolution. As you are filling information at a pixel level, when you upsize or downscale a pixel, the computer has to interpolate (enlarging), or get rid of information (reducing), inevitably damaging your final result. What I mean is that if you want to preserve the quality of your bitmaps, you have to stick to the initial work area you have chosen. Vectors have the totally inverse perspective. The image you actually see is not "filling" the pixels with information, what you see displayed on screen is rather the software's interpretation of a bunch of mathematical calculations. As pixels are unharmed, when you rescale a vector, you are simply changing a parameter in the code, so no re sampling takes part and the quality is always the same. No info is interpolated or lost in the process. On the other hand, you are limited to 8bit per channel color depth (256 colors) and you cannot see the images without proper software. Bitmaps can carry other information like alpha channels, Z-Depth and ID's, giving the images special properties as transparency and 3D filtering. On the other hand, vector images are not confined to the square space of their canvas, as they have innate transparency properties.
Transparency_bv
Vectors have inherent transparency properties. Bitmaps need extra information.
Never in this life can you use vector images for film, since they are less photorealistic than rasters and lose their versatility in post production environments. You could also say that bitmaps used with technical negligence are like bad voodoo for printing workflows.
Vector_Example_bv
The perfect example of a vector is a font. A 6px font has the same sharpness and quality as a 600px font.
Hdr_bv
The perfect example of a bitmap is a high color depth photograph. Beautiful shot by Gregory Hugh Davidson
As vectors are resolution independent, they should be the perfect choice for creating icons. But this is not true, due to a not so obvious technical issue. When you scale a vector to such a small size as 24 or 16 pixels, the image becomes blurred. Why does this happen? Well we noticed this after many, many experimentation and our humble conclusion is that monitors are essentially pixel based displays. Remember my pixel definition an hour ago? Well, when you work on a bitmap image, when you paint A pixel, you are completely, extremely, certainly sure that you are painting the same unit displayed on your monitor. While when working on vectors, you are just telling the software to make a rendering of an equation, over a given grid of pixels. There is not a single command in the code of vector images that can give you the power to tell the software to exactly, positively fill the displayed pixels on you monitor. The power of vector graphics is that you can resize your images without resampling. This is because vector images do not fill individual pixels with information; they rather distribute the image on whatever size we tell them. This versatility and power is surprisingly what makes vectors flaw when scaled down to extremely small sizes like icons. The same rule applies to fonts. Vector fonts are indispensable in 99% of graphic work, but if you need a font below 9px you have to go for bitmapped fonts.
Icons_bv
Icons_2_bv icons taken from iconshock icon sets, super vista series
Ok, let's wrap up all this enlightening information. I've read many articles on the Internet, where the differences between bitmaps and vectors take almost fanatic undertones. I think that taking part of either side is ridiculous. Both image formats have many virtues and were designed for specific uses. Deciding between one or another is like comparing your mom with your dad. Both are special, and both have their issues. It's more likely that you can watch a ballgame with your father than with your mom, but you can positively be sure your mom won't give your kids french fries and coke for breakfast. And if you are a woman, you will feel more comfortable telling to your mom about the color of your boyfriends eyes than to your war-veteran-Texan dad. So, I wish you happy rastering and happy vectoring. Until next time!
recommendations_1_bv
Best Software for each application.

ThemeShock

16 Responses to “Vector vs Bitmap for dummies”

  1. gswdNo Gravatar
    June 11th

    I good article, and some excellent examples. You are starting to redeem yourself after that Twitter fiasco.

    Just 1 more day to get out the blog icon set you promised! :) Wouldn’t want to get Sherwood and cnshck all “twitchy” again, now would you.

  2. JjayNo Gravatar
    June 14th

    Hmm, that got me checking twitter n was pleased by what i found. Made a follower outta me! back on track, G loved ur article, u have a great (LONG) way of simplifying a difficult subject. Even the articles i skim i always learn a thing or two n appreciate the work u put into it. N the illustrations n details. As for u, if u dont care bout my digestion i dont care bout ur lack of sex life…HA! Now were even =P

    Okay now im getting mad, keeps saying 404 page not found n i cant read the stupid letters for confirmation so if this doesnt work im posting in the blog and YOU (g) can post my comment for me!

  3. Jjay
    June 14th

    Is there a key or something for the last bit? I’m assuming the programs in red are preferred choices. But they could be sponsered references, the most hated choices, programs you own. Or is the grey the bitmap and the red the vector? Is so, you need a damn line after VECTOR GRAPHICS to seperate it from the list of proggies. Besides that confusion ur grandmom would be proud. That is if she knows how to turn on a computer, find this website, find ur article, find her glasses, read it…. n figure out the crazy numbers at the bottom that look more like alphabet soup than confirmation coding.

  4. G. PiñerosNo Gravatar
    June 15th

    Hello GSWD. Glad you liked my post. But, friend, come on, drop the twitter article once and for all. The “twitter fiasco” as you call it, has been the most read iconshock article so far, (Since 2005) and it has been the only article that has received so much attention that other big blogs wanted to buy it. So, come on man, you seem the only one that couldn’t get a reflection out of it. It is normal that you either like or dislike an essay, but what you cannot do is close your brain to other opinions that can one way or another improve your own. Any chance you voted for Bush both times? … Ok, just kidding there:)
    Do you own an iphone? how are you going to use the last set we gave?

  5. G. PiñerosNo Gravatar
    June 15th

    Darling JJay how are you? Sorry I confused you with the last graph/chart of my article. The Black and gray are bitmap and the red-light red are vector. I’ll make adjustments tomorrow. Read your posts on Svizy’s blog and I think you are a hilarious author. I wanted to leave comments but seems the option is closed for now. If you need any kind of advice or help, you know where to find me.

  6. Jay-Jay
    June 16th

    Ooo much easier to understand. More fitting with ur writing style too. N ur such a darling for reading the stuff i wrote. Least now i know why no one was commenting on my stuff – i just thought no one was reading it. I’d give u a great big hug for making me feel better bout writing on his blog but ur WAYY over there n im WAY over here. Least now u c why i like ur writing style so much. n dont worry – i wont forget where u r.

    PS I looked up some tutorials on animation, n its only available in photoshop CS2 or higher (Or in Adobe Imageready which frankly i didnt know i had. So in my research i came across a neat tutorial by an Aussie who explained beginners framework and tweening. I have a new hobbie to explore with programs i already have! http://tutorialvid.com/viewVideo.php?video_id=606&title=Photoshop_Tutorial_Basic_Animation for the tutorial) That shortens my wish list to an AVI to gif/flash edittor and photoshop cs3 + classes dammit. (i learned commercial art on PS4 origionally – sad isnt it?)
    Little did u know u opened up a whole new world to me n i dont mean Aladdin either.

  7. AngelaNo Gravatar
    October 23rd

    Incredible post. I’m bookmarking it right now G.

  8. HaniNo Gravatar
    March 10th

    Excellent !
    Its really Number 1 tut about Vector vs Bitmap

  9. TraceyNo Gravatar
    April 10th

    Hi, I am an online student and nearing my 50th birthday and I am only letting you know my age because I was having the hardest time understanding Vector/Raster until I happened across this article. The wording was the best and better than any I have read from the real dummies books. 

    Thanks so much.

  10. wtf i dont understand non of that

Leave a Reply