optimising PNGs for iOS

Monkey Targets Forums/iOS/optimising PNGs for iOS

Anatol(Posted 2012) [#1]
Hi,

I just came across some useful information which I think is worth sharing: XCode automatically optimises PNGs in the build process for iOS (e.g. for App icons), but this optimisation doesn't seem to apply to PNGs in main.build/ios/data which is a copy of the main.data folder.

Just to be clear, the optimisation is not about file sizes (for file sizes check this thread instead: http://www.monkeycoder.co.nz/Community/posts.php?topic=253 ); in fact the file size of your PNGs will most likely increase. However, XCode optimisation will do some byte swapping and pre-multiply alpha. For a reason that I fail to understand iOS uses BGR instead of RGB, hence the byte swapping. And then it pre-multiplies alpha to the BGR colour values (which I guess is why the file size increases). The advantage of using this optimisation method is that this byte-swapping and pre-multiplying happens at build-time, not at run-time and you may get a performance gain.

Be aware that these optimised PNGs are no longer "valid" PNGs that follow the PNG standard, so they will be largely useless for image-manipulation or any non iOS platform including Mac OS. So if you want to read on and optimise your PNGs make sure that you don't accidentally corrupt all your source images.

It's very straightforward to batch-optimise all PNGs in either your main.data or build/ios/data folder (if you optimise the latter you'll have to do this after every build in Monkey). At the moment I simply copy my entire Monkeycode project folder and apply any optimisations to that folder.

To batch-optimise an entire folder you can simply run this command on a Mac
/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/iphoneos-optimize /path/to/my/project/main.data

For individual files use /path/to/an/image.png

This will replace the original files with the optimised yet 'corrupt' PNG!

iphoneos-optimize is a customised version of pngcrush. Instead of the command above you could also use
/Developer/Platforms/iPhoneOS.platform/Developer/usr/bin/pngcrush -iphone -f 0 /path/to/image.png /path/to/optimised.png

This gives you the option to make a copy of the original.

If PNGs seem corrupt and the icon is blank then they are optimised :)

Test and see if you get a performance gain.

A more precise explanation can be found at http://iphonedevelopment.blogspot.co.nz/2008/10/iphone-optimized-pngs.html

Cheers!
Anatol


Xaron(Posted 2012) [#2]
Thanks, that should be useful!


matt(Posted 2012) [#3]
You can get a QuickLook plugin to view these crushed/byte-swapped PNGs

http://www.quicklookplugins.com/2012/02/09/image-dimensions-and-file-size-in-ql-title-bar/

As Anatol says, works well with my PNGenie app.


anawiki(Posted 2012) [#4]
indeed file size increased a bit (5-10%), but load speed increased too, about 1s, drop to 4.2s from 5.2s.

Thanks for the tip!