Vector vs. Bitmap: file-size and performance

There is a sample Flash application (SWF) here that demonstrates the difference in performance between a complex vector shape and a bitmap in Flash. You need the Flash Player to view this video.

I was witness to a conversation today where a friend of mine was debating with members of a development team who were religiously maintaining that using complex vectors could not possibly slow down a Flash application. It made me realize (yet again) that there is still a lot of confusion in the development community on certain core concepts. Going forward, I'm going to try and document some of these in my blog posts, starting with the differences between vectors and bitmaps.

As you know, vector graphics comprise mathematical representations of lines, fills, colors, and gradients, whereas bitmap graphics are a pixel-by-pixel representation of the color, and optionally, alpha channel information in a visual element.

The greatest advantage that vectors have over bitmaps is that they can be scaled (both up and down) and translated without losing any fidelity. After all, you're only performing basic addition, multiplication and matrix operations on mathematical formulae. Flash is regularly spoken of as a "vector animation tool" although it can (and does) handle bitmaps really well too. (This wasn't always the case and it took a long time to get pixel-perfect bitmap rendering in Flash but we're finally there!)

Bitmaps, on the other hand, also have several advantages over vectors. Vectors, especially complex ones, can be both larger in filesize (and thus bandwidth requirements) and slower in performance than the same visual element rendered as a bitmap. This is the primary reason that Macromedia introduced the cacheAsBitmap property of the MovieClip class in Flash 8. Setting the cacheAsBitmap property to true makes Flash take a bitmap snapshot of any visual information in a MovieClip and use that in place of the original contents. Of course, the original vector version of the MovieClip has to be rendered at least once before you can cache it as a bitmap so this is not a solution for loading in very complex vector graphics as you will get a performance hit the first time it is rendered (you will notice better performance if you render the original graphic as a bitmap and load that in instead.)

The sample SWF, above, demonstrates the performance difference between a somewhat complex vector graphic (a square formed of 1,000 separate lines) and a bitmap snapshot of the same object. The difference in performance between the two is substantial (going from 3-4fps to over 32fps on my machine.)

The choice of whether to use bitmap or vector graphics will vary by project requirements and most applications end up using a combination of the two. Knowing when to use one and when to use the other is important as it can have a huge impact on the performance of your applications.

Download the source for the sample (.zip; 65K).