Saturday, March 16, 2013

iOS + WebP

So I am working on an unreleased iOS app for the iPad and the pen and paper gaming community for a particular game. This app so far has quite a few large PNGs to help facilitate it's custom look and feel. Tools like pngcrush help a lot but I wanted to look at WebP, Google's new image format for the web.

Poking around the web, Carson McDonald already has tackled the hard ground for getting developers working with the latest version of WebP in both their iOS apps as well as the iOS Simulator. The part I felt was missing was a dead simple UIImage category extension to make this work. Carson has a sample app that shows the library in use. This got me one step closer but still his app is a fairly contrived example and didn't seem to emphasize the alpha layer which was very important to me (and one of WebP's biggest features).

So I took another couple of steps. I created my own sample app with two PNGs converted to webp images at 100% quality (i.e. cwebp -q 100 file.png -o file.webp). The savings were immediately apparent. The background went from 1.9MB to 598K. The layer went from 237K to 50K. Even if there is no difference in the devices RAM as some arguments contend that it has to unpack it all anyhow, there is a huge difference in over the wire download speeds for the app itself.

In order to help my use of storyboard, when I'm developing, I still keep the original PNGs around and reference them in storyboard. I then swap out the UIImage when the views load programmatically and all is well. Before sending off a copy via Test Flight or to the Apple Store, I remove the PNGs, compile and send and all is well; it saves 10s of megabytes for me so its a huge win.

Hope it helps you too. Please take a look at Carson's webpage as he likely has other great tidbits of information. Thank you too Google for making webp!