PNG compression and iOS apps

ref：http://bjango.com/articles/pngcompression/

At face value, running your images through a tool like ImageOptim seems like a great idea. It grinds away, shaving kilobytes or bytes off each file, hopefully helping your app download and launch faster. Very good things to aspire to, and well worth some consideration and effort.

Enter Xcode. In an effort to dramatically increase drawing performance of iOS apps, Xcode re-compresses PNG files as it builds. It premultiplies the alpha channel and byte swaps the red, green and blue channels to be sequenced blue, green and red. The result is optimised for iOS’s purpose, but as a side effect, ImageOptim’s work gets undone, due to the images being rebuilt (please readJeff Lamarche’s article on the topic for more technical info on exactly what Xcode does).

To get some real world results, I saved seven files from a recent project using Photoshop’s Save As and Save For Web, and also ran the Save For Web image set through ImageOptim once and twice (sometimes a second run through ImageOptim’s processing can increase the benefit). The images were chosen for various qualities — some were small icons with transparent backgrounds, some were large opaque Retina images. I wasn’t particularly scientific about it, but a good range was covered.

Each bar graph below shows the total size of the six images in bytes. The different methods yield different results, and ImageOptim certainly helps knock a few more bytes off.

The Index image set was created using Save For Web with the PNG-8 format, so they’re only 256 colour (not recommended). I included these just to see if Xcode processed PNG-8 files as well as PNG-24 (full colour PNGs, that are far more typical in iOS development).

Default@2x NT is a duplicate of Default@2x, but with the Transparency option turned off in Photoshop’s Save For Web dialogue.

So far, the results vary wildly, with ImageOptim’s output the clear winner.

The story is quite different after Xcode has had its way with the images.

Two of the ImageOptim images had ever-so-slightly smaller file sizes. I’d love to know why, but the difference was so small that I’m not sure it warrants further investigation.

All tests were conducted using ImageOptim 1.2.5, Photoshop CS5 and Xcode 4.2.1. ImageOptim combines a bunch of PNG optimisation tools, like OptiPNG, PNGCrush, AdvPNG and PNGOUT.

It is possible to disable Xcode’s PNG compression, but you’d want to have a very good reason for doing so. One reason may be that your specific use case requires smaller files over optimised drawing. The ImageOptim website has instructions on how to do it.

If you’re willing to invest a little time, it’s even possible to use AdvPNG to create iOS-specific PNG images.

There’s definitely some good tools and good reasons to optimise your images for the web, but I wouldn’t bother for most iOS app development.