The Breakroom

Over the past few days, a discussion about resolution independence in Mac OS X has started on some of the developer blogs we follow. The whole thing started with Resolution Independent Fever by Daniel Jalkut. Sven-S. Porst followed up with a more user centric view of the situation.

Although we’ve touched on some of the design and workflow issues required with larger icons, we haven’t offered any advice targeted at developers. For our readers who don’t know an NSImage from a DPI, we suggest that you go get some nice icons, because the rest of this message will get technical :-)

In many development tasks, the first solution you come up with isn’t necessarily the best one for the final product. When we first encountered resolution independence, it seemed like vectors were the way to go. You only have one file and it can be used on the desktop, in a UI or for promotional materials.

But as you begin to use vectors, you realize that there are some inherent problems with size, speed and appearance:

Size: Today’s photorealistic icons require a lot of vectors. More than you may realize. Unless you’re dealing with simple line art, effects such as gradients, shadows, and highlights result in enormous files. As an example, compare this 512×512 pixel PNG file of the CandyBar icon with a PDF file containing the same image. The PNG file is about 100 KB while its PDF counterpart is a whopping 3 MB. Consider a five icon toolbar with PNG files versus a toolbar with PDF files—500 KB versus 15 MB. Your ISP will love you and your PDF icons!

Speed: As developers we love to deal with abstractions—unfortunately, concrete reality often gets in the way. Vectors present a nice conceptual image model which fails when you consider today’s graphics hardware. Simply put, a GPU can’t deal efficiently with vectors. Processing of raster images can be sped up significantly by performing tasks in parallel—no such speedup is obtained with vectors. Try opening both of the sample images above in Preview. You can zoom in and out to get a feel of the performance characteristics of vector versus raster data.

Appearance: Like all Mac developers, we’re concerned about our application’s appearance. Scaling vectors that are optimized for presentation at a large size will result in images that look unacceptable at small sizes. The trained eye of a designer knows which pixels to keep and which ones to throw away—automated scaling of an image does not.

As you begin thinking about resolution independence for your application, keep these things in mind. A basic rule-of-thumb would be to use vectors if you can imagine the paths used to create the image. Daniel’s pie chart graphic would definitely fall into this category. If your brain can’t handle the complexity of an icon like the one for CandyBar, it’s unlikely that your Mac will be able to either.

If your graphic designer is following our previous advice for designing multi-resolution graphics, it will be a simple task for them to create the images you need with a tool like IconBuilder.