What the title says; basically, if you display an image 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/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With