Falling foul of iOS’s 3 megapixel resource limit
One of the most important elements in our recent redesign is our new portfolio. We ran out of time during the redesign week and couldn’t include all of the portfolio pieces we’d planned. This week we’re adding more and while we were doing that I discovered something I hadn’t known before about large images and iOS.
As you can see on our page for The Environment Bank, we decided to introduce each project with a large screenshot.
These are content images rather than CSS background images and they’re unavoidably big (I think) as I’ve used double size dimensions for high-resolution screens. I wish there was a better way but, you know, responsive images. (I’m also currently experimenting with Scott Jehl’s picturefill but that’s a story for another day.) For example the first Pairoo image is a super sized 2852x2319 pixels. Where it makes sense for the image, I used pretty highly optimised PNG images to reduce the file size as much as I could too.
The large images displayed correctly in desktop browsers but not on my iPads, unless I reduced the pixel size of the images — I learned this through swapping different images in and out — or exported them as JPGs.
The answer lies in Apple’s Safari Developer Library.
Because of the memory available on iOS, there are limits on the number of resources it can process:
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.
Emphasis mine.
I don’t know how much RAM my new iPad mini with a retina display has, but that’s a lesson learned. File size isn’t the only size related issue to watch out for on mobile devices, megapixel size matters too.