What is the Best way to Handle Very High Resolution Images?

Question

I am developing an app, which needs to use images that have a resolution higher then (2000 x 2000) for text clarity purposes.

I have a Background image, over which I need to show Overlay Images with the same resolution. The number of overlays are variable, from 2 to 30.

As loading the Image with UIImage, it takes 4 Bytes for every pixel, so if one image has resolution 3000x3000, it will take up-to 34 MB of memory, 15 MB for 2000 x 2000.

Thats where the problem rises, the app crashes after loading 4-5 images on 3GS, and 11-13 images on iPhone 4.

The Overlays need to be placed exactly over the background image. They are just like what we have in Google Maps traffic Overlays. This doesn't rule out tiling, but makes the task relatively complex.

How should I handle this problem?

Answer 1

Definitely, you can't load whole image set into memory at once. You need to load only visible portion of image data and should unload invisible part as fast as possible.

If you want to solve this at QuartzCore level, there's CATiledLayer class just for this purpose.

Apple Reference: https://developer.apple.com/library/mac/#documentation/GraphicsImaging/Reference/CATiledLayer_class/Introduction/Introduction.html

Apple Sample Code: https://developer.apple.com/library/mac/#samplecode/CALayerEssentials/Introduction/Intro.html#//apple_ref/doc/uid/DTS40008029

Additional informations: http://red-glasses.com/index.php/tutorials/catiledlayer-how-to-use-it-how-it-works-what-it-does/

To use this layer, you need to split source images into many tiles. And supply them when the layer needs it. (drawLayer:inContext: method.) The method will be called on non-main thread, so user-interface won't be blocked. Don't forget freeing invisible tile's image to save memory.

Also, you can implement this with low-level OpenGL code with dynamic resource loading using background thread. In this case, you can use PVRTC lossy, in-memory compression which can save video-memory usage a lot, but it's really painful, and time-consuming work. I recommend using of CATiledLayer. This is enough for most cases.