Vector vs Bitmap for dummies

Bitmap image enlarged to see the individual pixels

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?

450×300 72 DPI

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 -4×4- black colored tiny squares. –pixels-

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.

Two examples of vector graphics in SVG format. Notice the code is based on XML

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.

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.

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.

The perfect example of a vector is a font. A 6px font has the same sharpness and quality as a 600px font.

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, positivelyfill 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 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!

About the Author:
Iconshock is a design studio specialized in icons and interface design, working in this area from 2005 and with the biggest icon stock collection.