Posted
May 5, 2010
(1014 days ago)
iPad Safari image limit workaround
I hit a mobile Safari limitation recently when building an AJAX-y site on the iPad. If you load a ton of images eventually mobile Safari cuts you off and will display a [?] instead of the image. After doing some tests it appears that this limit is around 6.5 MB. Here’s a test page I made that attempts to load 20 500kb images. When opening this page on an iPad, 7 of the images don’t appear, even though in Charles they are returning 200 – success. I’m assuming this is similar to the way autoplay is disabled for the video tag on iPad/iPhone. Apple probably wants to make sure users don’t get overloaded with downloads when browsing on 3G.
Anyhow, 6.5 MB is a hefty load and wouldn’t fare well on 3G, but for one reason or another you may want to work around this limitation. I found the easiest way to patch my code was to load the image into a canvas tag using drawImage(). The canvas tag appears to be immune to the limitation. Here’s another test page using the canvas tag, all the images should load.
Thanks for taking the time to research a solution to this and post it! It worked perfectly for me after I retrofitted the canvas fix into my web apps.
One note: you still have to be a little conservative. If you throw enough images directly onto a page, you can crash the iPad safari browser.
Also if an img is off screen you can switch it with a 1px blank.gif image until it needs to be shown. My guess is the image limit is based on the sum of all the img tags currently loaded… so if you manage what’s on and off screen you can probably get around the max. I haven’t tested this thoroughly, but my preliminary attempt seemed to prove this. I never finished checking it however, because the canvas band-aid was easier to implement.
Actually this seemed to be working at first, but then it somehow stopped. I can’t explain it. There weren’t any changes to the code but the canvas solution just also stopped loading and I was using it in 2 different scenarios:
1) An AJAX lightbox
2) A page that displays a page of images inline but resized for the iPad screen
It did stop working after I crashed Safari a couple times. I don’t see how that could have had anything to do with it, but who knows. My current solution for (2) was to modify my gallery pages to vary the page size based on the filesizes of the images. So it only loads inline images up to the ~6.5 meg limit.
I’ll probably stick with that since it’s less likely to crash Safari and so the user can still get the popup menu to save images.
Apple might have pushed an update that fixes this hack. I don’t always have access to an iPad so I haven’t been able to test this yet. When I do I’ll update.
Another suggestion would be to lazy load and unload images as needed. So if you have a big image, and it’s off screen, switch out the src with a “blank.gif”. The total seems to be based off of total KBs loaded in src attributes vs. overall downloaded. So if you manage what’s loaded in the src’s a bit you can probably work around it if the design of your site will allow it.
Has anyone found a workaround for this? I tried the canvas workaround that I found elsewhere but found it to be slow and clumsy. I’m running into this around the 6MB mark as well, BUT unloading the images has no effect, my experience is that even if only one image is in the DOM at a given moment, if you’re over the 6MB, that’s it until you reload, and in some cases close the window.
I bought an iPad specifically to develop a version of a photo app I was working on and have been extremely disappointed in the overall lack of JS performance. Even the “accelerated” features like changing opacity or the CSS animations grind to a halt, which means no cross fades or animation at all. In addition to the image problems which render something like a photo gallery useless.
As a device it’s amazing, as an Ajax development platform it’s a steaming pile of shit.
@Ryan: Totally agree. I tried Rob’s method and it doesn’t work for iPod touch 3rd gen running iOS 4.0. I’m pretty disappointed. It’s clear Apple cares a lot more about the native SDK/APIs and for all their talk they treat JS/HTML5 devs almost as an afterthought when they aren’t deliberately hampering mobile Safari.
thanks so much for this post – it really saved the day on an image-heavy html-based hybrid iPad app we built in a week and a half. I’ll be posting some code examples of our interpretation of this workaround at my blog – uihacker.blogspot.com/
great, i look forward to checking it out!
I agree with Rob. I have put a small sample how I got the problem solved on my end. Check it out on my Youtube Channel. www.youtube.com/wolvrix
Nice example, thanks for sharing!
All the images loaded on my iPhone4. Interesting that the iPad has this limit. I know that the iPad iOS and iPhone iOS are deliberately at different stages of development and I anticipate them synchronising in the future. Perhaps that will remove the limit.
Also note that the iPhone 4 has twice as much RAM as the iPad. That may make a difference in the amount of image buffer available for Safari.
My friend and I were able to duplicate this bug on the iPhone 4, it just took more images on one page.
seems not to work
I’m currently working on a project which involves compositing multiple layers of transparent “animated” PNG sprites onto a canvas. After hitting a lot of barriers it seems that the limit on my 32G iPad running iOS 4.2 is around 12,5 million pixels across all images on a page / in JS memory. Compressed file size of the images has little impact on this. Can anyone confirm this?
Best Regards,
Lukas
Seems as if this limitation is fixed in iOS 4.3.
Can someone else confirm this as well?
I’ve written a variation on this technique that lets you have img elements that you can dynamically resize and still retain the correct aspect ratio. Demo at:
www.thingsthemselves.com/ipad-image-limit-workaround.html
I’ve tested this on iOS 4.2.1. Would appreciate any feedback on if this works on iOS 3.2 as well.
Also, as Dennis K. mentioned, it looks like iOS 4.3 doesn’t have this limitation.
as a ria developer mostly in flash i would say that you should be carefull using the drawImg command it takes op alot of process – i know it shouldnt be a problem with still images – normally if you want to process an animation with a fairly large scale through the draw command you can expect the cpu to be maxed out – i would expect the same if you try to draw some 10 mill pixels in differend canvas’ at once
Hey Rob, hope all is well brotha, and thanks for the tip here!
Seems like they must have patched this up recently — your canvas example seems to stop loading at around 6.5mb.
Hey John, good to hear from you.
Yah, I haven’t really tested it since I initially wrote the article. I’ve run into a few weird limits like this with mobile Safari, and sometimes it’s the kind of stuff that only shows up on the actual device vs. the simulator. Which I guess is a good reason to make a case to have one to test on
Just a quick note from the other side of the pond to say a big thankyou. I’ve been tearing my hair out on how to display large-ish images on an iPad and the canvas trick worked beautifully. I probably owe you a virtual beer or two