Vector vs. Bitmap

In this tutorial, I'm going to talk about  vector and bitmap graphics. More specifically, I'm going to explain why they are so different and what each of them should be used for.

Flash is, of course, capable of rendering both vector and bitmap graphics. However, since the two types are in many ways each other's opposites, they should be used in different situations.


When you go to a website and see a static image, it is almost certainly a bitmap. Bitmaps (also called "raster images") are made up of pixels—dots lined up next to each other in a grid that represent what you can see on the screen.

Example of bitmap graphic
This small icon comprises hundreds of pixels


This is often a big flaw of bitmaps. An 1000x1000 pixel image is composed of 1,000,000 pixels (one mega-pixel). Add to this the fact that each pixel has to store the RGB (Red Green Blue) value , and you get the picture. Overall, the image contains 3 million pieces of information. That's quite a lot, eh? :-)


Scaling bitmaps is also rather problematic. For exaple, scaling up an image results in additional pixels being added. This makes the picture's quality much worse. It is therefore advisable that you keep a copy of your image whenever you decide apply to it transformations.


Vectors graphics is what Flash is famous for. One thing that makes this type of image so distinctive is that it is composed of lines and shapes and other geometrical primitives. The position, scale, width and other properties are based on mathematical formulas, which means vector graphics are usually smaller in size and have better quality than bitmaps. Moreover, scaling doesn't effect their quality.

To understand just how powerful vector graphics are, look at the SWF file below.

In the image above, there are 8 copies of QuickTime logo, arranged in an increasing order. The logos in the first row are vectors, while the remaining logos are bitmaps. You can easily see that the logos in the first row—although not exactly identical to the original QuickTime logo—have much better quality. And let me tell you one more thing: they are also much smaller in file size!

Another advantage of vectors is that the image does not loose its quality when it's scaled, rotated or subject to any other transformation.

 I hope this tutorial cleared your doubts concerning this topic  :-)


Average: 1.3 (1411 votes)