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.
Inspired Dziner says
What a awesome read. Thanks for the interesting info - I learn something new everytime I read your blogs! (And just a FYI - "In reality, the explanation is a bit more complicated that this"... that > than)
Jacques Marneweck says
Josh, thank you for clearing that up. It's always great getting useful information which explains how the graphical formats work and why you guys individually handcraft those images which always look great. Great to see that your obsession with pixel-perfection produces better looking icons compared to the vector based icons.
Marco says
While it may be true that scaling images into odd multiples of pixels will result in soft or aliased pixels, your comments about vector stroking are slightly disingenuous.
Vector stroke weights can be defined to be either a fixed width or scale in proporation to the other elements. A 1px stroke can be locked so that it remains at that value no matter how large the overall artwork is scaled.
A clever icon designer could design their logos in vector, scale and rasterize into a variety o sizes, and simply clean up the aliased pixels.
Josh Williams says
Marco, you're correct to a degree. I should clarify and note that we design ALL of our icons in Adobe Illustrator, in vector format -- but as you say, they still must be scaled and cleaned up. But there's even more to it than that when it comes to icons. Proportions must also be fixed. The proportions of an icon at 16x16 may be drastically different from the proportions of an icon at 48x48 due to the way your eye optically interprets the design.
Even though we create the icons as vector objects, each object must be tweaked and realigned when scaled to create the proper effect at each given size. In the end, multiple bitmap files must still be exported for actual use. A single vector file will simply not suffice for the vast majority of real-world usage.
Jacob says
@Josh
I'm curious, would these scalling problems exist if one was to first create the vector image at the high resolution and then scaled the image down instead of, in this example, creating the small resolution vector image first and then scaling up.
@Jacob says
I forgot to mention in my previous post, I was under the impression that both Apple and Microsoft were going to vector based icons in their next release of operating systems. And as well, make the operating system pixel independent.
I'm guessing that they are running into the same problems that you mentioned above. Any thoughts?
Russ says
Josh, I completely understand your frustration with non-pixel based format (svg etc.)
I am running into similar problems with a web site that I am designing and would like to completely use "ex" (or "em") instead of "px". However, it seems that 1ex in firefox is not the same width as 1ex in IE.
Very frustrating!
Here is some code in case anyone is interested in see that "ex" are not the same width in each browser.
------------------
#box { background-color: pink; width: 50ex }
This is 50ex wide, but is a different width dependent upon the browser you use
Russ says
Let's try that HTML snippet again, now using HTMl character (< & > etc..)
-----------------------
<html>
<head>
<style type="text/css">
#box { background-color: pink; width: 50ex }
</style>
<body>
<div id="box">This is 50ex wide, but is a different width dependent upon the browser you use</div>
</body>
</html>
Josh Williams says
Jacob: Starting at a larger size and scaling down still poses the same issues. If a line is 2px wide at 128x128 pixels, what will it be at 16x16? There is no way to represent .25 pixels. So in that instance, groups of pixels will be visually compressed to represent a single pixel at a smaller size. The colors for 8 square pixels in a 128x128 image are averaged to represent a single pixel in a 16x16 image. This may work alright if all of your artwork is in clean 8-pixel chunks at 128x128, but this is rarely the case. Thus, blurring occurs.
I'm not sure what Apple has planned for the future, but currently their icons are represented by one 128x128 pixel image, with separate bitmap icon resources for 32x32 and 16x16 sizes. Often a 48x48 is included as well. The nature of the Aqua style icon does give Apple a bit more leeway though in how meticulous they must be at smaller sizes.
Microsoft (to the best of my understanding) is using 256x256 32-bit PNG images as the standard icon format in Windows Vista. One can argue whether or not a 256x256 image is truly an icon per se, but it will be interesting to see how this works out.
I've been privy to some proposed UI conventions that use SVG images for icons so that an entire UI could be scaled dynamically to fill different displays with different resolutions. Thus far the results look pretty ugly.
Again, the larger your image is, the less these issue are a concern. But there's a reason why your Photoshop toolbar icons are still clicked off more or less by hand.
Josh Williams says
Russ: While your discussion definitely warrants its own post, I'd definitely recommend using "em" instead of "ex". You'll find that the results may be a bit more predictable.
Russ says
@Josh
Thanks for such a quick reply. It looks like "em" are much more standardized across browser, except for a few rounding errors that I am encountering.
In case you were curious to know, I was basing my use of "ex" over "em" on the following article.
http://kb.mozillazine.org/Em_vs._ex
vuong says
This sounds a lot like an issue of control, with em unit v. px unit.
The whole point of em unit is for scalability, with Disability user compatibility. Pixel measurement, on the other hand, are for people who wants their sites to look close to 100% across all browsers. It is not that em is better than px. (I like pxvery much). But it is the same when Neo told Morpheus that the Oracle is, well, "Just another system of control."
John Marstall says
Marco: A clever icon designer would not use strokes. A 1 pt stroke is, by default, misaligned with the pixel grid. It must be offset by .5px to align correctly with the pixels. Even then, any scale operation of the stroked object which results in non-integer dimensions (that's most of them) will knock the stroke back out of alignment.
Believe me, Josh knows what he's talking about there.
Fernando Lucas Lins says
I have been creating icons in vector software (Illustrator actually) for quite some time, but I haven't found it to be of much help, specially in small sizes, thanks to the blur issue. I have adapted myself to create icons up to 64x64 pixels in Photoshop, editing them on a pixel level, and from 128x128 pixels on using vectors.
I think this is the best (fastest?) way to assure that your icons will look crispy and charming, and not blurry. Vector is not always a good choice for small stuff (remember the old Flash font issue?). I'm with Firewheel guys, raster for small icons all the way ;-)
Sliker Hawk says
Great article. I'll be cleaning up my icons edges more often now, and I'll make sure to lock the stroke sizes too.
fandango says
bitmap icons = lots of work...
I create mostly vector icons, no problem.
There is a lot of choices how vector create,
article don't say true.
F
Josh Williams says
I think it's important for me to reiterate as some people aren't getting the gist of what we're saying here. We're not saying vector icons are bad.
In fact, ALL of our icons are designed in Illustrator as vector artwork. Vectors save us time and effort. They allow us a great deal of flexibility. We simply DO NOT use the SAME master vector file scaled for each individual icon size. We create a master vector file, then scale and tweak and edit and tweak that vector file some more for each individual size.
Allan says
Russ: The ‘em’ unit is relative to the font size. It is not supposed to be standardized across browsers.
Jakub Steiner says
You have summed it up in a much more readable fashion than I have.
Lots of folks think that SVG is the way of the future and providing a single, resolution independent icon is a reality.
Josh Williams says
Jakub -- It's nice to meet others as obsessed with the pixel as we are. Good stuff. Love your work.
Josh Peters says
It's a shame we don't have a good format for web icons like Apple uses for OS X. Essentially, an icon file contains various sizes of icons (from 16x16 all the way to 256x256) and the rendering engine interpolates between the nearest two sizes to get the best representation. ie, if you have a 48x48 and a 128x128 icon, and the client was set somehow for a 56x56 icon the engine would figure out how to represent the 56x56 icon with the best amount of detail.
There really should be some good way in Illustrator to specify which pieces of an illustration are more important when it comes to scaling downwards...maybe not.
Jakub Steiner says
Actually SVG does have the means for this, the switch element. Inkscape developers are working on support for this in 0.44, so lets hope it'll find its way to browsers in a not so distant future too.
Ahruman says
As a graphics programmer, and since you’re so obsessed with them, I feel I must point out that A Pixel is not a Little Square, A Pixel is not a Little Square, A Pixel is not a Little Square! It is in fact a point sample, which happens to be one of many on a uniform rectilinear grid. Understanding this distinction is important in maximising the quality of graphics.
Cliftonite says
Great article. Very helpful, thanks. Check out what I wrote about your text box. Keep up the good work.
Ad says
Can't really agree with the position this article takes - call me a cynic but vectors are able to be scaled to any size quite successfully in my own experience epec if you, as others have said, lock the stroke whereas selling bitmaps at sets of fixed sizes gives you a potential bigger market share - if the customer needs a different size - they have no choice but to come back and make another purchase - it's a cash cow...
Zaigham says
Very nice article! Informative!. Thanks for sharing with us your knowledge.
josh says
ITS ABOUT BUISINESS : Bottom line its about protecting the creative source. Seems to me that if you give away your vector art you're pretty much giving away your business advantage. Certainly getting vector art is nice but you lose any control over the creative assets. Once I have your illustrator file I don't need to come back for more great work because I can just copy the styles, modify the art work, mix and match, and move on. Or I can post it to some P2P network and really suck the life out of your business. Think about it, why do are quality fonts are sooooooo expensive. Becuase they are too hard to protect. Why? vector my friend. And don't tell me you've paid for every font on your hard drive....
Mr C says
I think you may be stretching this one a bit - you do not give the vector away because you want to protect your business.
That's fine, and I would do the same, I just don't get why you don't just come clean and say it rather than dressing it up in this "it's better for you" language.
Jack says
Would you say it's realistic to draw an icon at 24 pixels? I find it difficult to design icons zoomed n, so most people like myself must suffice to resizing icons designed at larger sizes. Of course this causes the image to blur. To say you redraw the icon really isn't true if you aren't starting from scratch. As soon as you resize the image, it becomes tarnished. As you mentioned later in your posts, you tweak the image.
In reality you are still relying on vector to create your smaller images, but simply fixing them by hand and saving as a bitmap. Would you say this is accurate or are you actually recreating the icons from scratch at each resolution?
Josh Williams says
Hey Guys, especially the last Ad, Josh, and Mr C above -- You're wrong in your assumptions that this is about a business proposition. This is about creating the highest quality icons for each specific project. At larger sizes, vectors may do the trick. At smaller sizes (especially under 32x32 pixels, as I've stated), bitmaps rule the world.
Currently we're working on an extremely ambitious project where where dynamically mixing both vector and bitmap resources for a desktop UI. Even if you specify a fixed width stroke on a vector, it won't hold water once scaled down. There are a ton of dynamics at play here.
Trust us. We've been working with vector based icons for more years than most folks have been on the web. We know their strengths and limitations.
And yes, I've paid for (or have a legal license for) every font on my machine.
Jack -- It depends. Some icons we're simply able to tweak at smaller sizes. Others do require almost a complete redraw. Of course, we save our color swatches, gradients, etc., to save time.
John Marstall says
You can try it yourself, Ad. Take any vector image you prefer. Scale it down to 32x32. Then scale it down to 24x24... 16x16... 12x12... 8x8. Still look okay to you? Heck, just look again at the image Josh posted above. We didn't deliberately screw up the 16x16 or 32x32 sizes to make a point -- that's exactly what scaling does to pixel-targeted artwork.
An icon with any fine detail has to be rebuilt for each size if it's going to be of the highest quality possible. We do this because we hate crap icons. Feel free to do it your way, though, and see how many clients come back for a second project.
Jack says
Thanks for the response Josh. You guys have great icons. One more comment though... I think redrawing a flat icon at smaller resolution is 100 times easier than redrawing a 3D one. Have you tried drawing a 3D icon at 24x or 16x. I would have to say its near impossible to make look good or even closely resemble a higher res version that was drawn large. Not because of the lack of pixels, but simply because its hard to see what you are doing. Maybe this is not an issue with Illustrator (i use photoshop) or perhaps is because the icons I design are pretty detailed, but I find it hard to redraw anything beyond recreating a few lines here and there. Maybe the icon design community knows something I don't :)
Pozycjonowanie says
Lots of folks think that SVG is the way of the future and providing a single, resolution independent icon is a reality.