开发者

What's the largest image size that the iOS browser display without downsampling?

What the title says; basically, if you display an imag开发者_如何学Ce in the iOS browser (say, the iPhone), when the image dimensions surpass a certain limit, the image is downsampled and displayed at a fraction of the original resolution (ie. 1/n the number of pixels of the original).

This is, I'm guessing, a way to avoid crashing the browser when image sizes become too large due to running out of memory.

My question is, what is the upper limit to the image dimensions before WebView (or the browser) starts sampling every n-th pixel?

EXAMPLE: When displaying a 5760×1800 image, it is downsampled into 1440×450 in the browser (a 1:4 ratio).


Just finished a few tests and it seems that iOS (on iPhone 3GS with iOS 4.2.1 at least) downsamples the image when it hits the 1024px limit. Any image above this size has its pixels sampled by every n-th pixel, where n is the smallest divisor that yields a dimension <= 1024px.


For some reason Safari mobile is reducing the size but thankful there is a way to force the actual size in the css using:

-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/


According to the apple documentation there is a little difference between JPEG and other file formats.

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

So a JPEG image can have at max 2 * 1024 * 1024 pixels (2'097'152).

If I'm correct, here is the math needed to find the largest image dimension:

ratio = √(2 * 1024 * 1024) / √(5760 * 1800)= √2097152 / √10368000 ≈ 1448.154 / 3219.937 ≈ 0.449746
optimal_width = 5760 * ratio ≈ 2590 // it's 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 for the restrictions: https://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html (the "Know iOS Resource Limits" section)

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜