What is the largest image size displayed by an iOS browser without downsampling?

Question

What the title says; basically, if you display an image in an iOS browser (say, iPhone) when the image size exceeds a certain limit, the image is reduced and displayed on a portion of the original resolution (i.e. 1/n number of pixels of the original).

This, I think, is a way to avoid browser crashes when image sizes become too large due to lack of memory.

My question is: what is the upper limit on image sizes before the WebView (or browser) starts fetching every nth pixel?

EXAMPLE: When displaying an image of 5760 × 1800, it is reduced to 1440 × 450 in the browser (1: 4 ratio).

Answer 1

Just finished a few tests, and it looks like iOS (on iPhone 3GS with iOS 4.2.1, at least) reduces the image when it reaches the limit of 1024px . Any image above this size has pixels selected by each nth pixel, where n is the smallest divisor that gives a dimension <= 1024px.

Answer 2

For some reason, Safari mobile reduces the size, but fortunately there is a way to force the actual size in css to use:

 -webkit-background-size: widthpx heightpx; -webkit-background-size:980px 2574px; /* (simply put in the exact size of the wrapper image) */ 

originally found here: http://srihosting.com/blog/web-development/ios-safari-background-image-size-problem/

Answer 3

According to Apple documentation, there is a slight difference between JPEG and other file formats.

• For GIF, PNG and TIFF, if the device has less than 256 MB of RAM, the maximum size is 3 megapixels. If the device has more than 256 MB, then the limit is 5 megapixels.
• For JPEG, the maximum size is always 2 megapixels.

Thus, a JPEG image can have a maximum of 2 * 1024 * 1024 pixels (2'097'152).

If I'm right, here is the math needed to find the largest image size:

 ratio = √(2 * 1024 * 1024) / √(5760 * 1800)= √2097152 / √10368000 ≈ 1448.154 / 3219.937 ≈ 0.449746 optimal_width = 5760 * ratio ≈ 2590 // it better to approximate 1 pixel smaller optimal_height = 1800 * ratio ≈ 809 // else the image is quickly too big since we multiply each dimensions optimal_size = 2590 * 809 = 2095310 // less than 2097152 

source of restrictions: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html (section "Know iOS resource restrictions")