CODEWITHSUNDEEP
javascripthtmlcssimagesafari
Norbs Knight
Norbs Knight

Reputation: 169

Mobile safari downsamples large images. How to retain?

I have an HTML page with a 1675px by 2640px image in it. I tried viewing it in an iPad and apparently mobile safari downsamples the images. We wanted to show a high quality image but safari restricts this.

I've been searching for a solution to retain the image size. I've been viewing it in iPad 3 on mobile safari. People are suggesting to use another browser but by default we are using mobile safari.

Are there any CSS, JavaScript or other solution to this restriction?

Upvotes: 7

Views: 5334

Answers (3)

Unsigned
Unsigned

Reputation: 9916

Mobile Safari does not downsample progressive JPEGs. Assuming JPEG is an acceptable format for your purposes, simply convert them to progressive encoding. Assuming you have an existing, non-progressive JPEG image, you can use a tool such as jpegtran to losslessly convert the encoding to progressive scan.

Upvotes: 2

BrianH
BrianH

Reputation: 2123

I'm sure you are just going to love this answer, but the short answer appears to be: "you aren't going to get 1:1 large sized images".

The slightly longer answer is that Apple intentionally forces things to work this way because before the way it worked was just to not load the image at all, or crash.

Now, for a fuller answer with citations...

Apple's Known Resoruces Limits

The thing is, when an image is decoded/decompressed it takes up a whole heck of a lot more RAM space than the images filesize. The formula Apple states is that devices with 512mb of RAM, like the ipad 3 you mention, will refuse non-JPEG images above 5 megapixels, which results in:

height * width <= 5 * 1024*1024

For JPEG, Apple notes they will subsample to allow you to view jpegs:

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.

Note that it states 2 megapixels is the limit for full-sized viewing of JPEG, which is 2*1024*1024. As your image is roughly a bit over 4 megapixels, it will be subsampled on iPad 3. And no, there really isn't anything you can do to force it without using an external program.

To use an external program for minimal improvement, see this link where a person recommends GoodReader: Apple Forum, Seeking Full Image Resolution in MiniSfari

And here is another Stackoverflow with a similar question/answer pair: Image Size Limitations in Mobile Safari

Upvotes: 3

Raptor
Raptor

Reputation: 54212

To enjoy the retina feature of iPad Retina and iPhone 4 / 5, use doubled size image as follow:

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

Note the dimension is reduced to half, but the test.jpg does not require to resize.

Alternatively, you can prepare another set of high resolution graphics, and show it when retina screen is detected, using Media Queries ( Modernizr )

Pixel Density Theory: Retina screen puts 2 pixels into 1 pixel, e.g with 320px width, it actually contains 640px contents. Read more here: http://www.sitepoint.com/css-techniques-for-retina-displays/

Upvotes: 1

Related Questions