A GIF image, stored locally on the server (86.8KB, 1430x2246), is not displaying on a mobile website on my iPhone 3G device, running iOS 4.2.1. The site is built with jQuery Mobile and HTML5.
Here are devices and platforms I tested and the result of loading the image:
- All major desktop browsers (i.e. Win/IE, Mac/Win Safari, Mac/Win Chrome, Win/Opera, Mac/Win FireFox). PASSED
- iPhone 3G, running iOS 4.2.1, Mobile Safari. FAILED
- Opera Mini, on said iPhone 3G device. PASSED
- A colleague's iPhone 4S, running Mobile Safari. PASSED
- iOS Simulator, with Hardware->Version 5.0, Mobile Safari. PASSED
- iOS Simulator, with Hardware->Version 4.3.2, Mobile Safari. FAILED
- Android device, Version 2.3.3. PASSED
- Android SDK Emulator, Versions 1.5, 2.2, 2.3.3. PASSED
I decided to focus my attention on the iOS Simulator, Ver 4.3.2, since the image didn't even load up on a powerful desktop computer.
I thought it may be a memory issue with iOS 4.3.2 and Mobile Safari, perhaps related to the resource limits for images (iOS Development Guidelines). I understand there is a workaround for image limits (i.e. 6.5MB) but that didn't work for me, either (documented later).
The next thing I looked at was the size and dimension of the image. I downloaded a few free images (saved as GIFs) from the Internet and stored them locally on the server, all but one similar or larger in size and dimension than the image in question and they all loaded successfully in iOS Simulator, Ver 4.3.2.
FYI, the image sizes and dimensions were:
- 238KB, 2428x1531
- 414KB, 2993x2050
- 238KB, 2000x1490
- 196KB, 2192x2541
- 196KB, 850x638
Going back to the image workaround, if I understand it right, the main idea is wrap the img in a canvas tag (I correctly called the drawImage function in JavaScript), which I did. Unfortunately, the GIF still did not load. I tried loading the image as a background-image in a div tag, as well, and, again, this did not work.
I can't think of anything else to try. Is it possible the GIF is corrupt? I honestly have no idea what else can I do.
Let me add in all the above methods I tried that failed, the other images I had downloaded all worked correctly (again, within the context of iOS Simulator, Version 4.3.2). And I even looked at the simple mistakes like spelling errors and the source and filename of the GIF in question is spelled correctly. I even tried changing the image extension from GIF to JPG and then PNG and the image still did not load.
I would appreciate any help. Thank you.
Update
I tried checking the validity of the image using the link here, How do I programmatically check whether an image (PNG, JPEG, or GIF) is corrupted?, and the image was not corrupt. If I find a solution, I'll be sure to document it.
Thank you.
Update2
I got a copy of iranView and saved the GIF as a JPG (not just renamed it, which is what I did last time) and the image loaded in iOS Simulator, version 4.3.2, Mobile Safari. Using this same method, I tried saving the GIF as a PNG, because JPG is too large, but it did not load. Then, I tried saving the GIF as a JPG, and I saved the JPG as a GIF, but it did not load, either. Only JPG worked.
Update3
It turns out that those images I tested are really JPEGs; so, I had to retest. I downloaded the images from Google images, ensuring they are GIFs and larger than 2 MP. Here is what I found:
Re-reading the Known iOS Resource Limits section from the Apple Developer site, it says:
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. That is, ensure that width * height ≤ 3 * 1024 * 1024 for devices with less than 256 MB RAM. Note that the decoded size is far larger than the encoded size of an image.
The maximum decoded image size for JPEG is 32 megapixels using subsampling. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.
The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. The height and width of a canvas object is 150 x 300 pixels if not specified.
If all the above is ironclad, then why does images "earth_lights.gif" and "logoJDC_orange_GIF.gif" display on the iPhone 3G (4.2.1), yet does not display on iOS Simulator (4.3.2)? I tested all images with IrfanView to ensure their formats are correct - GIFs are truly GIFs and JPGs are truly JPGs. Based on all this testing, I'm leaning towards deducing Mobile Safari's decoding of GIFs, at least on dated iOS firmware, is inconsistent, as opposed to concluding the GIF image I was originally trying to display is corrupt.
