Friday, October 8, 2010

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:
Screen shot 2010-10-08 at 3.25.23 PM.png

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.
Screen shot 2010-10-08 at 3.29.46 PM.png

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


Christopher said...

thanks for making it available.

Not something I need right now, but I will let you know how it works out when/if I ever need it!

EttebaBa said...

Hi Dave,
I cannot open the tool on my mac(OSX 10.6), I get a message saying that my version of mac cannot open it....any solution as to why it won't open?

Michael said...


went down this same route a few weeks back (also driven by Apple's example app).

Thanks for putting Cutter together...looking forward to trying it.

Michael said...

I meant to say it would be great if this could be dynamically in the app itself. i.e. downloading a large image (not 1.3gb obviously but say 1/2mb images) from the web, "cutting" into tiles and storing in users documents folder for display later.

I'm not saying this can't be done; I haven't looked into…do you know if the tools to do this are available in the iOS API?

Andy W said...

The only tool I could find to do this was Tilen, from NaSoLab

So many thanks for releasing this. Will download and see how they compare when I get some more time.

Jeff LaMarche said...


I wish I had seen TIlen before I wrote this, but what's done is done. Looks like Tilen offers a few options I don't (like specifying output file format), but otherwise the functionality is the same.


The source is now on Github. The hard part's done - you could probably throw together an app that downloaded the file from the web and saved to the Documents folder relatively easily using Tile Cutter as a basis.


Who's Dave? ;)

Are you running on an older Mac? I may not have compiled in PPC or 32-bit Intel support, though that should be as easy as changing a build setting if you pull the project from GitHub.

Michael said...

Thanks Jeff, much appreciated. If I get anything working I'll let you know and maybe you can make it available to others that might need in app tile cutting.

Regards, Michael.

EttebaBa said...

Hi Jeff, sorry for referring to you as "Dave", I have been reading Dave Marks books.

I have an intel core duo iMac with the OSX10.4 pre installed but I upgraded to snow leopard 10.6.

Anyway, I will try and pull the project from Github and see what happens. Thanks.

palexander said...

I just solved this problem myself but I ended up using imagemagic. I wrote a little ruby script to handle all the details so I could output at multiple levels and tile sizes. Plust as a script it makes it easy to integrate into our build system. You can find it at

Jesse said...

Thanks Jeff, I'm going to definitely check it out on Git Hub.

I've been using Tiled UIScrollViews for about 12 months now in my apps and tried the Photoshop solution first, then wrote some PHP (using GD) to cut up my images into tiles, but memory is a huge issue.

I think a Cocoa solution is a lot nicer, thanks again!

Michele said...


tahnks for this tool. I looked for the WWDC presentation but I could not find it. Do you have the title/number?

Thanks a lot,


chilloutman said...

"I looked for the WWDC presentation but I could not find it. Do you have the title/number?"
I'm also looking for this! Can someone help us here? Thank you!

Matt Di Pasquale said...

WWDC 2010: Application Frameworks: Session 104 - Designing Apps with Scroll Views

@Jeff, thanks for this! It'd be nice if you could give it a directory of images and give it levels.

@palexander, I think your Ruby script is what I'm looking for. I'm going to try that. Thanks!

@Michael, have you made the iPhone app version of this yet that does it all for you? This is what I'd really like.

SEO Services Consultants said...

Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck! Web Design Company

Matt Di Pasquale said...


I like Tile Cutter, but I wanted the ability to specify a directory of images and levels. Thus, I tried palexander's ImageMagick script, but for some reason, my images looked better resized by Photoshop than by ImageMagick. So, I wrote a similar script for Photoshop:

Enjoy! And many thanks to Jeff & Paul for their inspiration!

@Michael, I'm still pondering about the iPhone app version of this that would download each page asynchronously from the Internet and slice it up for you in the background. Is there anything like this yet?

Chris said...

really nice but in UIImage you calculate the number of tiles, using the uiimage size and not the size of the underlying bitmap.

benjamin solberg said...

Just what i needed. And thank you for posting links to scrollview as well. i am building a map app with an offline map of a trekking area.