I was looking today at Apple’s iOS resource limits. All good and nice, it’s great that they’ll state them and we, developers, don’t have to hunt them down as we’ve done before and again. But I thought I should check these limits, namely the size of images limits. Because it’s important, if you create too big of a sprite it may not be displayed at all (it’s the decoded size that matters when decoding in memory, not the file size) or even worse – crash the browser.
So they say the PNG and GIF limit is 3 megapixels or 3 * 1024 * 1024 (3 * width * height), and JPEG is much bigger – 32 megapixels.
I wanted to see what happens after the limit – will the browser crash or what?
I have this “pagr” tool that helps me create resources – http://tools.w3clubs.com/pagr/. So I thought: 1024×3072 image should be fine:
http://tools.w3clubs.com/pagr/1.width-1024.height-3072.png
But then one pixel more, 1025×3072, should somehow fail:
http://tools.w3clubs.com/pagr/1.width-1025.height-3072.png
Turns out it doesn’t.
Even 3072×3072 didn’t fail either. True, takes a while to render (not to load, because it’s under 50K being mostly the same color) but it does render.
Then I tried GIF and I couldn’t even render 1024×1024. Not even 600×600. 500×500 is fine, so is 512×512. Not sure where the line is. Also interestingly enough after 600×600 fails and you reload, it does show up the second time. So does 700×700. Interesting, but you cannot ask people to reload to see your images.
So what do we know? Not much.
1. iOS 4.2.1 doesn’t have the 3 * 1024 * 1024 limit for PNGs. What’s the limit? Je ne sais pas, but it’s higher than that.
2. GIF have even lower limit. Even 600×600 doesn’t load at first load, although it does after refresh
3. Give PNG a chance, forget GIFs
More questions:
– This was alll loading images directly. Do they behave the same way when in a page?
– When in IMG tag vs CSS background-image?
– What are the limits?
– what about iOS 3? iOS2?
I’m off to bed, feel free to continue the experiment with the sizes
Here’s the URL, just play with the width/height and file extension:
http://tools.w3clubs.com/pagr/1.width-1024.height-3072.png