Under the Bridge

Image Optimization

So what with this new iPad and all, you notice that file sizes are a concern in your development? Yep, us too; but there’s some help out there we can glean from these case studies:

Tweetbot (an excellent, graphically-rich iOS Twitter client) weights 33.4MB, of which over 26MB is used for 978 images. It has all images compressed with Xcode, which converted them to “CgBi” format.

Here are results of converting images back to PNG and optimizing them with ImageOptim and ImageAlpha:

Screen Shot 2012-04-15 at 3.09.17 PM.png

That’s pretty impressive, isn’t it now? The tools used there are

ImageAlpha

ImageAlpha converts 24-bit PNG to paletted 8-bit with full alpha channel. This greately reduces file sizes with only minor loss of quality…

… Even images that need more than 256 colors can be made more compressible using special alpha-channel-aware posterizer.

ImageOptim

ImageOptim optimizes images — so they take up less disk space and load faster — by finding best compression parameters and by removing unnecessary comments and color profiles. It handles PNG, JPEG and GIF animations.

ImageOptim seamlessly integrates various optimisation tools: PNGOUT, AdvPNG, Pngcrush, extended OptiPNG, JpegOptim, jpegrescan, jpegtran, and Gifsicle

Note that you have to turn off Xcode’s built-in (de)optimization when using these, otherwise you’ll be rather confused as to why your binary isn’t any smaller.

Also don’t forget the transparent JPEGs masking trick we mentioned before, which might be more helpful depending on your images; for even more help with that, check out JPEGmini which general opinion seems to be have got some pretty nifty improvements on standard JPEG compressors!

h/t: @redglassesapps!

UPDATES:

Check out this Shoebox game graphics utility which includes a “JPGA Bitmap” tool to automatically produce JPEGs with masks!

Compressing PNG Images

PNG compression and iOS apps

WASTED – iOS app image size analysis

1
  • GogoKodo

    Thanks for the great information. I did a bit of testing and it seems the order of running ImageOptim + ImageAlpha matters which I find kind of strange.

    I have a hierarchy of folders that I’m running the tools on, mixed in with my png images are other files that shouldn’t cause any issues with what I’m doing. I’m using default settings in ImageOptim and I just drag my folder into it. As for ImageAlpha, I’m running the pngquant tool found inside of it from the command line with the arguments “-ext .png -force 256″

    in bytes
    Original Folder Size: 56,270,146
    ImageAlpha Only: 44,911,838
    ImageOptim Only: 48,329,956
    Alpha-then-Optim: 44,102,416
    Optim-then-Alpha: 44,911,842

    Overall not a huge difference but if you really really want to get as much space back as you can you should try different orderings, it’s possible for other images a different ordering may get a better result.