7

I have an HTML test page for this issue here. For some reason MobileSafari is reporting the Image.width/height properties of any image with more than 1700 pixels as half its value. That is, the width property of the JPG is, say, 2000 but MobileSafari JavaScript reports it as 1000. If I try the same code with a 1700px-wide image I get the correct width.

The test I did loads two images (same image in different dimensions) and displays the JavaScript size values. I tried in:

  • Chrome 22, Safari 5.1.7, Firefox 15.0.1 all in Mac OS X 10.6.8 (correct size)
  • iOS Simulator 4.3 SDK 3.2 (incorrect size)
  • iPad 2 with iOS 5.1 (incorrect size)
  • iPhone 4S with iOS 5.1 (incorrect size)

Any ideas why this is happening? Am I missing a setting somewhere? Why does it work with some images but not others?

The test is here: http://still-island-1941.herokuapp.com/sizetest.html

This is the JavaScript code:

 var imgBig, imgSmall; function init() { imgBig = new Image(); imgBig.onload = handleBig; imgBig.src = "/images/size.jpg"; imgSmall = new Image(); imgSmall.onload = handleSmall; imgSmall.src = "/images/test1.jpg"; document.getElementById("browser").innerHTML = navigator.userAgent; } function handleBig() { document.getElementById("dimensionsBig").innerHTML = imgBig.width + "x" + imgBig.height; document.getElementById("testBig").src = imgBig.src; } function handleSmall() { document.getElementById("dimensionsSmall").innerHTML = imgSmall.width + "x" + imgSmall.height; document.getElementById("testSmall").src = imgSmall.src; }

This is the HTML code:

<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> <meta name="viewport" content="width=device-width, initial-scale=1"/> <title>MobileSafari image dimensions test</title> </head> <body onload="init()"> <p>your browser: <strong><span id="browser"></span></strong></p> <p>big image dimensions: <strong><span id="dimensionsSmall"></span></strong> (should be 1700x1134)</p> <img id="testSmall" /> <p>small image dimensions: <strong><span id="dimensionsBig"></span></strong> (should be 2000x1334)</p> <img id="testBig" /> </body> </html>
Improve this question
1
  • In my case I was loading an image 3000px square, and Javascript in iOS was telling me the onload event had fired OK, yet the reported height and width at that moment were zero. I assume I have the same issue. Commented Jan 22, 2016 at 18:46

1 Answer 1

Reset to default
6
+25

Yes, it exists a limitation in size and weight.

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. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to decode to a size that has one sixteenth the number of pixels. JPEG images larger than 2 megapixels are subsampled—that is, decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

The maximum size for a canvas element is 3 megapixels for devices with less than 256 MB RAM and 5 megapixels for devices with greater or equal than 256 MB RAM. The height and width of a canvas object is 150 x 300 pixels if not specified.

Some links which could help :

Cheers

Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

I'm not sure if this is the reason for my problem above since, as you can see in the test I made, the "large" image is 2000x1334=2,668,000 which is less than 3x1024x1024=3,145,728 pixels.
Try to lower the quality (weight) of the picture to see if it changes something. Have you tried the workaround I gaved to see if it changes anything ?
I uploaded a new "large" file so compressed (20% quality) it looks terrible... 72kb (compressed)... still no change in dimensions reported by MobileSafari
The max size apply to decoded image - another link with a solution in the comments
Yes... I know... I was answering to your "Try to lower the quality (weight) of the picture to see if it changes something."

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.