Home/ Questions/Q 8626773
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-12T08:06:50+00:00

I have an HTML test page for this issue here . For some reason

  • 0

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

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0