Adventures with Bitmaps and Vectors, part 1
by Kristin Henry

It’s important to understand bitmaps and vectors if you’re going to work with digital media. There is nothing mystical about them. They’re just data file formats-- data formats that require different processing procedures for rendering on a computer screen. My intention, with this article, is to give you a basic understanding of these formats, so that you can make the most of what they offer.

Pixel This!

Let's start with what vector and bitmap graphics have in common. First of all, they are both file formats for saving information about computer graphics. It may seem obvious, but computer graphics are rendered on a visual display, such as a computer monitor, and these displays are composed of many dots of color, called pixels.  You could say that the pixel is the atom of computer graphics. 

On a reasonably high resolution screen, there are so many pixels that our eyes do not see them individually, much like the dots in this famous painting by Impressionist Georges Seurat.

seurat Seurat dots

From a distance, the colors in Seurat’s painting look smooth and blended. However, as you approach the painting, you see that it is made of individual dots of paint.

This visual trickery is similar to our perception of images on a modern computer screen. If you’ve got a decent monitor, you don't notice the individual pixels on it. But if you hold a magnifying glass up to your monitor, you should see pixels arranged in a grid. They’re consistent in size and shape. These pixels, and the patterns of colors applied to them, create the images you see on the screen.

magnifyScreen

magnifiedCloseUp

Painting by numbers

Back in the digital dawn of the early 1980’s, I was lucky enough to have an advisor who added Computer Science to my class schedule. It was great! We could pretty much work on what we wanted, as long as we learned how to write working code.  Even back then, graphics appealed to me, but  to draw an image on the screen, I had to write a line of code for each pixel.  While there weren’t a lot of pixels on those monitors, it was a lot of work to display an image on them. (Note, not all BASIC was this ..umm…basic, but this is what they had in my school’s computer pod).

If we had to set the color of each pixel individually, in one of today’s scripting languages, we might write something like this to set the color of one particular pixel:

// color pixel in position 200 black
pixel_num = 200;                              
myColor = 0;                                     

setPixel(pixel_num, myColor);

Fast forward, to modern graphics…and modern graphics editing software! We don’t have to write code that talks to the monitor.  Now we have data files that contain the information needed to draw the image. These files are then used by a program, to display the image on the user’s screen. This is important, because it provides opportunities for file size and rendering optimization. We’ll talk more about this later.

With graphics software, along with  mouse and stylus tools, we can visually select and color the pixels.  Why am I dragging you through this history? It’s all about pixels. The pixels are still set one by one, but now we have much more sophisticated tools for telling the computer how to color them.

Pixel by pixel

Drawing an image on a computer screen is like drawing on graph paper (coloring the squares individually). Each pixel has it’s own coordinate, or address, on the screen, and is rendered sequentially. 

Note: For the rest of this article, I’ve illustrated the pixels as circles to emphasize them as individual pixels. On monitors, the pixels are rectangles.

For the sake of simplicity, we’re going to use a model screen consisting of 30x30 pixels. To color the screen in solid teal, we could define all pixels as teal.

30x30 dot matrix

To color the eighth pixel red, and the rest teal, we’d need a simple algorithm like

one red dot in teal matrix

1. color first seven pixels teal,
2. color eighth pixel red,
3. color the remaining pixels teal.

To draw a vertical red line on a field of teal, things get a little more involved:

line of red in matrix of teal dots

1. color first seven pixels teal,
2. color eighth pixel red,
3. color next 29 pixels teal,
4. color next pixel red,
5. color next 29 pixels teal,
. . .
60. color next pixel red,
61. color remaining pixels teal.

A slightly more complicated shape, like a smiley,  would take even more lines to define pixel-by-pixel.

smiley 30x30 dot matrix

1. color first 40 pixels teal,
2. color next 10 pixels black,
3. color next 18 pixels teal,
4. color next 2 pixels black,
5. color next 9 pixels yellow,

147. color remaining pixels teal.

While these may seem like a lot of instructions, they are executed very quickly, and this is actually a very efficient way to render graphics on a screen. However, it does mean that the list of instructions takes up a lot of space when saved as a graphics file, even with file compression.

Dots,  Shapes, and File Formats

Now, we come to the differences between bitmap and vector graphics files. These differences lie in how they describe the distribution of color on the grid, and how this information is rendered to the screen.

The data in a bitmap file is essentially saved as sequences of pixel addresses and color values, and they are drawn to the screen with little processing. You can think of bitmaps as giving instructions to a pen that moves back and forth across the grid, row by row, coloring each pixel in order.

In vectors, however, the data is stored in a very different way. Instead of pixel by pixel, a vector file saves patches of color, defined as geometric shapes. To use a textile analogy, if bitmaps are weaving, vectors are embroidery.

Take a look at the following illustration, which shows an abstract portrait of what information the file would have to save.  If each pixel must be represented., you can see that it  would require a lot more memory than the vector version would, which has just two points and the geometric shape rectangle. Remember that I’m using a simplification of what actually happens, to keep the focus on the overall concepts.

dot matrix

Do vectors really save images of simple shapes in smaller files than bitmaps? As a simple test, I created a 30x30 fla, and drew a 30x30 teal rectangle on the stage. Then I set the publishing settings for jpeg and swf, and published. The resulting files met my expectations, even for such a simple example.  The jpeg file is much larger than the swf version.

jpeg->  647 bytes             swf-> 78 bytes

As the image gets more complex, vectors keep file sizes smaller than bitmaps. In this example I use a simple smiley face. The jpeg file was 1.16kb, and the swf was 310bytes. In case you’re curious, the gif file was 1.05kb.

  rectangle smiley
swf 78 bytes 310 bytes
gif 845 bytes 1.05 kb
jpeg 647 bytes 1.16 kb

This trend holds for a lot of complexity. However, highly complex images, especially photographs, are more efficiently stored as bitmaps than as vectors.  Additionally, performance also slows down as vectors are used for highly complex images.  

Resolution, Scaling, & “Pixilation”

Vector graphics scale, and bitmaps don’t. This is pretty common knowledge, in the computer graphics world, but what does it actually mean? It goes back to how the information for each pixel is stored.

Let’s start with resolution, which has to do with how many pixels are used. Low resolution means less detail, and high resolution means more detail. The curves are more smooth and natural looking.

More dots, means higher resolution. If we had a low resolution screen that was 30x30 pixels, the curves in a smiley face would look rather jagged. When the same shape is drawn in a higher resolution, the face looks a lot more natural and curved. With higher resolution, the curves becomes even more smooth.

smiley roughsmiley smooth

Take a look at our first smiley, which is defined as a 30x30 pixel bitmap. The shapes and lines look rather ragged. If we stretch this image onto a 60x60 pixel screen, the edges will look even more ragged.  Why?

What happens when you enlarge a bitmap?

Roughly, if you are doubling the size of a bitmap, each original pixel will be duplicated into four pixels.

2x2 to 4x4

Note: when you zoom in on an image in a graphics editing program, and you start to “see pixels”, you’re not actually seeing pixels. You’re seeing representations of them.  Since bitmaps don’t scale, you’re seeing what the program has rendered to represent the original pixel. 

What happens when you enlarge a vector?

When a vector image in enlarged, it is drawn at the new scale. There is no pixilation, and the image looks as smooth as it did at a smaller size. We’ll talk more about why, in the next section

From File To Screen

While the vector file format can be much more compact than bitmaps, it requires more effort to render it on the screen, because each shape has to be evaluated and converted to the individual pixel coordinates that it describes.

The more complicated the shape, the more complicated the description of it. Complicated shape descriptions take up space in a vector file. A simple square (or rectangle) just needs a starting coordinate and the height and width to describe which pixels it occupies on the grid.  The shapes in this flower require a more complicated description.

rectangle flower

Keep in mind that it’s not just the complexity of the shapes in vector images that contribute to the processing requirements, but also the overlapping of shapes, and layers, leading to the same pixel being evaluated repeatedly. In the following example, the pixels in the yellow square are calculated twice: first as part of the blue square, and then as part of the yellow square. The pixels in the purple circle are calculated three times.

multi-layered

When you get to the level of complexity shown in the following example (based on an example from Aral), individual pixels are re-rendered hundreds of times. You might find it interesting that the swf file size for this example is actually slightly larger than the gif version, but still smaller than the jpeg version.

lines

Vector + Bitmap = Flash

In the next section, we’ll use our understanding of bitmap and vector formats and make the most of them with Flash.

Adventures with Bitmaps and Vectors, part 2 ----> coming soon!