Image size limits in mobile safari?

Question

I am working on an iOS application using PhoneGap. I ran into an annoying problem when some of my images didn't load. I think this is a cache problem that I played around image sharing.

I finally found that the problem is related to the height of my image. After a whole bunch of trial and error, I found that an image above 7864px would not load in an iPad simulator or iPad. It will load in Safari. This is not a file size limit, since it is only 45 thousand. And I upload images that are 700 thousand in size. In size, in another place without problems.

Has anyone come across this? I cannot find any documented image size restrictions in Safari mobile. If there are restrictions, it would be convenient to know them.

Answer 1

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

So, let's say some math: suppose an image is 5000x5000 pixels in size, with 8-bit RGB. This means that each pixel takes 3 bytes:

5000 * 5000 * 3 = 75,000,000 (approximately 71.5 million)

So, you see that your seemingly small image really very quickly fills the memory. iOS can no longer throw away parts if it's under the pressure of memory, it's the whole image or nothing.

Your only solution is to split the image into smaller parts. iOS can then delete images that are no longer visible from the memory (I doubt such a huge image that all parts are visible all the time).