Loading a 20MB png in a UIImageView embedded in a UIScrollView

Question

I have a large png Image that I need to Zoom&Move. I therefore created a UIScrollView and embedded a UIImageView.

The App works fine in the simulator, but when running it on the device (8GB iPod Touch) it crashes as soon as the view is loaded.

I tried with a smaller test Image (4MB) works fine and suspect the iPod can't handle a 20MB PNG. I also tried different other formats, such as JPG (in various save patterns), but that did't help either.

Any clues how I can solve this?

Answer 1

Ouch, 20M is a large image. The first thought that comes to mind is can you dice up the image? Ie instead of one image have a whole bunch of small images which together make up the larger image. Then you can load on demand the same way google maps downloads image squares.

Answer 2

have a look at the ScrollViewSuite Example from apple. Sounds exactly like what you are trying to do.

3_Tiling demonstrates:

• How to subclass UIScrollView to add content tiling
• Reusing tiles to optimize performance and memory use
• Changing the resolution of the content in response to zooming

Answer 3

I suggest the Example Photoscroller . It demonstrates CATiledLayer which you can use to tile your image and even use smaller images as lod images. It's much smaller then the complete ScrollViewSuite example but has everything you need to do what you want. It contains only 2 classes which you should be able to use in your project with minor edits.

You might want to check the WWDC 2010 Session #104 "Desinging Apps with Scroll Views"... they handle and explain that example.

You will need to tile your image. I suggest imagemagick for that :)