I recently read this article via @_DavidSmith on twitter. While noble, it does miss a fairly big optimisation technique. That is reducing the bit depth of your PNGs from 32bit(16 million colours) to 8bit (256 colours).
I hear many of you crying out in pain right now, but stay with me.
Really, unless you’re using a huge colour gamut, or using alpha channel effects you may get away with using 256colour PNGs and save yourself ¾ of the file size… yes thats right a 75% reduction in file size!
Here is an example of the splash screen for one of my apps one is 32bit the other is 8bit:
Can you tell the difference? Perceptially maybe not, but in terms of file size, the 32bit PNG is 999k and the 8bit PNG is 378k. Thats quite a saving eh? So how do you achieve this amazing saving?
Well if you use photoshop to generate your UI elements, quite simply: you use the ‘Save for web and devices"
This will bring up a funky UI allowing you to do a side by side comparison of the original image versus the one you are going to save. Up in the top right of this UI is a drop down where you can change the format of the saved file (I’ve highlighted it in the image below). Select PNG-8 from here, then set the dither to Diffusion.
The dithering is important! Why? Well printers have been doing dithering for years, you might not have noticed as the PPI of printers was so high, but they do it. Guess what… your iPhone 4/4S has a PPI as high as the 'base’ of a laser printer, so dithering is a very real option for graphics now.
From here you can save out the final image.
While this isn’t perfect for every UI component, e.g. places where you use a wide colour gamut, or places where you need alpha translucency, it is a sure fire way to reduce the size of your application.
And while I can already hear complaints of 'but its 256 colours’, yes that individual element is, but that doesn’t stop it being composited at the full 32Bit colour of the iDevice’s screen, so if you’re clever with how your UI is layered you can create a full-colour UI from a whole bunch of 256colour PNGs each with their own palette.
So stop and ask yourself (or your graphics guy) do you really need that 32bit PNG for your nav bar or can you get away with a 256 colour one.
Case in point: using this technique I reduced the size of the ZummZumm .ipa file from about 8 Megabytes down to the current size of 2.6Megs!