Cutting Large Images into Tiles for UIScrollView

If you ever need to display an obscenely large image on an iOS device using a UIScrollView, there's a session available in the WWDC 2010 videos that will show you exactly how to do it without eating up all of your available memory. The basic idea is that you have multiple versions of your image stored at different scales, and you chop each of them up into tiles and use a CATiledLayer to display them. That way, you don't have to maintain the entire obscenely large image in memory all at once and your app's scroll performance stays snappy.

Of course, you have to get the images chopped up into tiles in order to use this technique.

There's a great command-line open source tool called ImageMagick that will, among other things, chop an image up into tiles that can be used for this purpose. Unfortunately, I didn't find ImageMagick very useful for really, really large images (over around 100 megs). The program would just sit and churn and fill up my hard drive with gigs of swap space without generating any tiles. It worked fine for smaller images, but I needed something that would work on big ones.

So, I went looking for an alternative tool without much luck. There are a handful of commercial tools that will do this, but the ones I found were for Windows. I know Photoshop has the ability to do this with slices, but I didn't want to go down that route for a couple of reasons, not the least of which is that I don't have a current version of Photoshop and don't want to give Adobe any money.

After some fruitless Googling, I decided to take advantage of the fact that I'm a programmer, and I rolled my own app to do this. It was nice to be back in the Cocoa APIs, but I must admit that they feel a little krufty compared to the iOS APIs. Anyway, I call the program "Tile Cutter". It's not the most original name, I admit, but it was developed as an in-house product and didn't need a witty title.

Tile Cutter is rather bare bones and was developed in about a half-day, but it seems to work well. I was able to slice up a 1.3 gig image (yes, really) into 400x400 chunks in about 15 minutes on my laptop. I would imagine I'm not the only person who needs to slice up images to use in UIScrollView, so I've decided to release Tile Cutter as a free utility (of course, with no warranties or whatnot). I will also be releasing the source code on GitHub once I've had a chance to clean up the code a little.

Here's a screenshot of the main interface:


And the progress bars that display in a sheet when Tile Cutter's churning away. You'll actually only see the progress bars on very large images, however, since it operates quite quickly on more reasonably sized images.



Download Tile Cutter 1.0. Feedback, as always, is welcome.

Posted in: developer tools,UIScrollView