I’m going to come straight out and say it—if you’re spending any effort compressing or optimising your PNG images for iOS app development, you’re wasting your time.
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 read Jeff 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.
There’s definitely some good tools and good reasons to optimise your images for the web, but I wouldn’t bother for iOS development.
Design articles
PNG compression and iOS apps
iOS Photoshop Actions & Workflows
Everything is a grid
Smart Objects
Exporting from Photoshop
Iterate Podcast
Pixel perfect rotation
Pixel perfect vector pasting
Pixel perfect vector nudging
What if iChat was one window?
Gradients
Designing for Retina display
Designing for Retina display, part two
A new Drobo Dashboard icon
Noise and textures
Photoshop CS6 wish list
iPad images
An iPhone 4, without the queue
What to do with all those extra pixels?
Photoshop roundrect roundup
Colour management and UI design
Testing landscape app interfaces
How many layers are in my Photoshop doc?
App Store articles
The life and death of a fake hotdog app
Dissecting iTunes links
The settings used to be in the Settings app
Gold digging on the App Store
Mobile and portable app store round-up
Bjango articles
2010: Our best year yet
2009: Our first year as Bjango
Consume for iPhone 4
The moon phase during the moon landing
About the author
Marc Edwards (@marcedwards) is the Director & Lead Designer at Bjango.
Follow us
Bjango on Twitter
Bjangocodes on Twitter
Bjango on Dribbble
Bjango Dribbble RSS
Bjango Releases RSS
Bjango Articles RSS
More info about our feeds