Icon Design: Bitmap vs Vector
2006 April 5 by Josh
Here at Firewheel, we create a boatload of icons, and one of the most common questions we get asked about icon design is, "Why do you deliver your icons individually sized in PNG or GIF files, when a single vector file like SVG or EPS can be made any size we desire?"
While the answer is a technical one, it's not too difficult to understand. But before we get started, we should brush up on the general differences between bitmap and vector file formats.
A bitmap image file (such as GIF, PNG, TIFF, etc.) is comprised of pixel-based image information. Pixels, for the uninitiated, are the tiny little squares of light that make up your computer screen. The word pixel itself is an abbreviated form of the words "picture element." The little square pixels of light are extremely easy to see with the naked eye on an LCD flat panel monitor if you have one. A 24x24 pixel icon representing a red square would be comprised of 576 individual red pixels, each represented by little bits of numeric data in an image file. A larger image requires more pixels, leading to more numeric information, and thus a larger file size.
A vector image file (such as EPS, SVG, etc.) is comprised of geometric, mathematical-based information. A vector image file containing a red square scaled to 24x24 pixels would simply contain numeric information regarding the mathematical location of the square's four corners, information about the color the square is filled with, and information defining the size of the square as 24x24 pixels on screen. Basically our red square vector file only needs about six little bits of information as opposed to our 576 bits of information required for our bitmap red square.
In reality, the explanation is a bit more complicated than this, but you get the gist: Changing the size of a vector image file from 24x24 to 48x48 simply requires the editing of one bit of data (the size). The math does the rest. However, changing the size of a bitmap image file from 24x24 requires the addition of 1728 more pixels, resulting in a larger file size.
Thus a single vector file may used to represent it's image at multiple sizes, whereas a bitmap image may only accurately represent its single pre-determined pixel size..
So if a vector file format can scale and shrink to represent any size it so desires, why does Firewheel Design insist on drawing new artwork for each icon size we deliver to a client? It's simple, really: Relativity.
Let's look at the printer icons above. The top row consists of four individually drawn bitmap icons, each of the same subject, each delivered at a different size. The bottom row consists of a single vector icon, originally sized at 24x24 pixels, then scaled mathematically to the other sizes shown.
Notice a difference? I thought you would. In the top row, each icon is crisp and the 1-pixel lines are sharply defined. In the bottom row, only the master vector file (originally created at 24x24) is crisp. The other three sizes are blurry.
"Why is this?" you ask. "I thought vector files could scale big and small and far and wide, and still retain their image quality." Well, technically they do. But there's a weakness in using vector files, and this weakness becomes more apparent at small sizes. Especially sizes under 48x48 pixels. The weakness is that computer monitors are still inherently pixel-based (that is to say, bitmap-based) displays.
When you take a vector image, originally sized at 24x24 and scale it down to 16x16, the relative proportions do not match. There's no way you can evenly distribute 24 pixels of information into 16 pixels of space (remember, there's no such thing as half a pixel). So the image blurs.
There's also no way you can evenly scale 24 pixels of information upwards into 32 pixels of space. Again, the image blurs.
Furthermore, if you take that same vector image, originally sized at 24x24 and scale it up to 48x48, you're now doubling the proportions. You no longer have crisp 1-pixel lines. You have chunky 2-pixel lines. Scale it up larger (say to 96x96) and those lines become even thicker.
Now this is fine if you want Fisher Price icons, but not desirable if you're looking for crisp and clean. And this is why we design each icon size to scale, instead of relying on a single vector file. It takes more time, and may cost a little more money, but we believe the results are worth it.
There are a few caveats: First, if you're working with larger icon sizes (say, above 48x48) you're not going to notice the difference as much, and you may find the results acceptable. Second, your mileage will vary as you create different styles of artwork. The less-detailed your linework is, the less you will need to worry about this.
Now you know our process, our obsession with pixel-perfection, and why it takes a bit more work when you need more than one icon size. Vector artwork is wonderful, but it should not be relied upon as a silver bullet. For small icons, bitmap is the way to go.