Resolution independent bullshit meter off the charts
Over at iconfactory Craig Hockenberry tries to make the case against using vector representation for icons (via daringfireball).
Now, before I get into this, I would like to point out that there is an entire industry which revolves around bitmap icons, not just images but icons specifically, and there are tools which are specifically designed to manipulate bitmap icons. The iconfactory is one of these companies. While I have nothing against that, consider that vector icons are a threat to the established base of bitmap icon purveyors. So, if you are looking for a new product idea, start working on tools to create and optimize vector based icons.
Craig writes:
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!
PNG is a file format designed specifically for storing bitmap image data in a compact form, so it is fairly well suited for an icon. PDF is a file format designed for documents, business documents, archival storage, absolute highest quality printer rendering. See the problem here? PDF can be excessive for storing just vector art for icons, while it does the job accurately, it typically stores a ton of other information which is not desirable for icons. This is like comparing the storage requirements of a wallet photo to a life size portrait mounted in a Baroque frame with an artists statement and brief history of the subject.
Now, this is not to say that PDF can not store things efficiently, it can, but typically programs which generate PDF are interested in preserving information, not saving disk space.
Craig links to a 100KB PNG of a CandyBar icon and a 3MB PDF file of the same icon to illustrate his point.
First of all, if you take this PDF, open it with Mac OS X Preview, Print it and re-save it as a PDF it reduces the file size down to 1.6MB. This is because Craig's PDF is full of XML metadata which is completely extraneous to creating the image, the OS X printing system removes it, even the printer doesn't need it.
Second of all, this is a PDF 1.3 file, the most recent PDF version is 1.7, each version has decreased file size, so this is not an optimal PDF, how un-optimal you say? Well, if you run this file through Acrobat 8.0 on Windows and create a PDF 1.7 file with it (Reduce File Size), the result is 1.1 MB, another half a megabyte down, still displays fine on OS X too.
Now, let's take a look at what this PDF is made of, Acrobat's PDF auditing at your command:
1MB of images. raster data. So, what the hell, this guy is comparing high resolution bitmaps stored in a PDF to smaller bitmaps stored in a PNG. Yea, what is the point of his post? To be fair, these bitmaps are probably generated by the drawing program and Craig has no idea they are in there. This PDF is obviously some sort of original proof just saved as PDF and is not optimized as a vector icon. If you actually set out to design a vector based icon considering storage requirements, you wouldn't have a PDF like this.
Gradients, shadows, highlights and the graphics effects you see in use today can usually be expressed compactly. The problem is finding the right combination of file formats and programs to generate and store vector icon images with all the desired effects. It's not a hard problem these days, companies like Adobe and Macromedia have put a lot of work into it with Flash, Flex and SVG.
Craig again:
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.
I can't believe this is actually being said. "Simply put, a GPU can’t deal efficiently with vectors" ? One of the primary benchmarks for a GPU is triangles per second, what is a triangle? Vectors. While GPU's are amazingly good at throwing bitmaps around, they are equally good at vector rasterization. A huge part of the field of computer graphics is the invention of algorithms which can render abstract representations efficiently. 3d graphics (of which 2d is a subset), bitmap and vector based, lend themselves to high degrees of parallelization. Even in the realm of high frame rate 3d games you see some moves away from textures (raster surface image) towards shaders (abstract surface description) because the abstract description is resolution independent, great for HD, and highly optimizable with silicon.
The whole Preview zooming thing is a red herring, PDF is not the best format to begin with and the document is full of raster data! Keep zooming, you'll see the resolution independence fall apart on the purple gradients.
Craig last assertion:
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.
I do agree with this to a certain extent, low resolution icons are not well represented by vector art, high resolutions icons can be though, which is the point, Apple is slowly gearing everyone up for higher resolution displays. You can have both, neither are bad.
In closing I leave you with these, kittytank at 12KB is my favorite:
http://www.dlanham.com/art/dragon/dragon.swf (112KB, press the button)
http://www.dlanham.com/art/kittytank/kittytank.swf (12KB)
http://www.dlanham.com/art/reddog/reddog.swf (84KB, press the button)
http://www.dlanham.com/art/bones/bones.swf (28KB, click the creature)
http://www.dlanham.com/art/hyper/hyper.swf (12KB)
Not only are these cool artwork which scale well, they have animation, some have sound, the file sizes are pretty small relative to the quality of the content, and best of all, the guy who created them works for iconfactory.
