Image size limitations in mobile safari?

Question

I'm working on an iOS app using PhoneGap. I ran into an annoying problem where some of my images weren't loading. Thinking it was a cache issue I played around swapping images.

I finally discovered that the issue had to do with the height of my image. After a whole bunch of trial and error I discovered that an image taller than 7864px will not load in the iPad simulator or the iPad itself. It will load fine in Safari. It's not a file size limitation as these are only 45k in size and I'm loading images that are 700k in size elsewhere without a problem.

Has anyone run into this? I can't find any documented restrictions on image dimensions within mobile Safari. If there are restrictions, knowing them would be handy.

Answer 1

For native apps, Apple says images larger than 2048x2048 1024x1024 are to be avoided and should be broken down into smaller ones. The problem here is not the file size on disk, but the size in memory: the image has to be decoded and turned into a "flat" representation.

So let's do some math: assume an image 5000x5000 pixels, with 8-bit RGB. This means each pixel occupies 3 bytes:

5,000 * 5,000 * 3 = 75,000,000 (roughly 71.5 MiB)

So you see your seemingly small image really fills up the memory very fast. iOS now cannot throw parts away if it's under memory pressure, it's the whole image or nothing.

Your only solution is break down the image into smaller parts. iOS can then remove images that aren't visible any more from memory (I doubt with such a huge image that all parts are visible all the time).