My previous post on Resolution Independence for Developers has received some criticism. To begin with, I’d suggest that people read our initial post after WWDC—we do all our design work with vectors and recommend that method to others. We’re not trying to hold onto established bitmap formats; our workflow would be much simpler if we could deliver vectors directly to clients.
Other critics have commented that the CandyBar PDF contained images. To be honest, I didn’t think about this when I asked one of our designers to create a PDF file with an icon.
It’s true that the CandyBar PDF can be optimized. Printing to Postscript and then using Distiller to create the PDF is one method. This extra work shrinks our original 3 MB example down to about 1 MB. Much better, but still an order of magnitude larger than the PNG file, and you lose the ability to edit the icon.
The question you must ask yourself is why are there bitmaps in the PDF file in the first place? That’s where we begin our rebuttal.
As a software developer, I don’t care how a graphic designer creates an image. I know that they use tools like opacity, luminosity, Gaussian blur, inner glow, and transparent layers to achieve the final effect. I have no idea of how it relates to the final file size.
And that’s a good thing. Do you really want to put yourself in a situation where you have to specify the effects your graphic designer is allowed to use? Are you even aware of all the effects they have at their disposal? Do you know how each effect contributes to the final file size?
In spite of the fact that vectors work in any coordinate system, tools that produce illustrations have resolution settings expressed in pixels. Why is that?
The simple truth is some effects cannot easily be expressed with mathematical equations. This, in turn, prevents a compact representation in a layout language such as Postscript, PDF or SVG. The workaround is rendering the effects as bitmaps within the layout (using the selected resolution.) This is why file sizes increase as the working resolution increases.
To see this in action, let’s examine a simple Illustrator document. When the circles are rendered without any effects, you get a file that is 16 KB (non-optimized.)
When you add transparency, a blur, and a multiply between layers the file size doubles. The culprit is the circle on the right—it is now a bitmap.
Of course, it’s entirely possible to create an icon without any effects. It’s even possible to do some very creative things with simple vectors. But it won’t fly with a client who’s intent on winning an ADA.
To them, it will look like it crawled out of a Postscript printer in 1990.
So where does that leave us? With a realization that, in practice, “vector” PDF files are no longer resolution independent.
All of this is just a long winded way of explaining Apple’s recommendation in the Resolution Independence Overview (pg. 23):
Vector-based art is automatically scalable, so you should use vector-based images for simple artwork; such as black-and-white images or flat images without dimensional detail (such as shadows or gradients).
In summary, our original advice remains. If you’re a designer, create with vectors to future-proof your work. If you’re a developer, bitmaps provide the best combination of size, speed and appearance. And if you decide not to take our advice, we promise not to hold it against you. :-)
