Mobile safari zooms out. How to save?

Question

I have an HTML page with an image of 1675px at 2640px. I tried to view it on the iPad, and apparently, mobile safari reduces the image. We wanted to show a high quality image, but safari limits this.

I was looking for a solution to preserve image size. I watched it in iPad 3 on mobile safari. People suggest using a different browser, but by default we use mobile safari.

Is there any CSS, JavaScript or other solution for this limitation?

Answer 1

I’m sure you will just like this answer, but the short answer is as follows: “you won’t get a large 1: 1 image.”

A slightly longer answer is that Apple intentionally makes things work this way, because before it worked, it was just not loading the image at all or crashing.

Now, for a more complete answer with quotes ...

Known limitations for Apple computers

The fact is that when an image is decoded / decompressed, it takes up a whole gamut of much more RAM than image files. Apple’s formula states that devices with 512 MB of RAM, as ipad 3 mentions, will reject images other than JPEG above 5 megapixels, resulting in:

height * width <= 5 * 1024*1024 

For JPEG, Apple notes that they will be subselects so you can view jpegs:

The maximum decoded image size for JPEG is 32 megapixels using a subsample. JPEG images can be up to 32 megapixels due to subsampling, which allows JPEG images to be decoded to a size that has sixteenth pixels. JPEG images larger than 2 megapixels of a subsample, i.e. decoded to a reduced size. JPEG subsampling allows the user to view images from the latest digital cameras.

Please note that it states that 2 megapixels is the limit for full-size JPEG viewing, which is 2 * 1024 * 1024. Since your image is approximately slightly larger than 4 megapixels, it will be selected on iPad 3. And no, you really don’t can do to make it not use an external program.

To use an external program for minimal improvement, see this link where a person recommends GoodReader: Apple Forum, search for full resolution images in MiniSfari

And here's another Stackoverflow with a similar pair of questions / answers: Image size limits in Mobile Safari

Answer 2

"Mobile Safari" does not reduce the playback of JPEG files. Assuming JPEG is acceptable for your purposes, just convert them to progressive encoding. Assuming you have an existing, non-progressive JPEG image, you can use a tool like jpegtran to seamlessly convert the encoding to progressive scan.

Answer 3

To enjoy the retina function of the iPad Retina and iPhone 4/5, use the double-sized image as shown below:

 <img src="test.jpg" width="837" height="1320" /> 

Please note that the size is reduced to half, but test.jpg does not require resizing.

Alternatively, you can prepare another set of high-resolution graphic images and display it when a retina screen is detected using Media Queries (Modernizr)

Pixel Density Theory: A Retina screen puts 2 pixels in 1 pixel, for example, with a width of 320px , actually contains 640px content. More details here: http://www.sitepoint.com/css-techniques-for-retina-displays/