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?
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
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.
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/
Related
What can I do to work also good on IPhone/iPad? Thank you!
On MAC it works...
Here is the github url
The problem is one the shop page. The pics are png.
https://paulus1991.github.io/ecommerce/#/
Answer
I guess it is image size issue with iOS.
When I check your [website>shop] the image size is 1200 * 1200 pixel.
But There is some size rules in IOS. So, I think your image file is too large to render in iOS.
The maximum size for decoded GIF, PNG, and TIFF images is 3 megapixels.
Referecne
iOS Image not appearing - StackOverflow
Resource Rules - iOS Document
I am under the impression that JPEGs cannot store resolution/DPI/density information. How is it possible that iOS Image Preview is able to provide resolution per image attached?
The reason I ask is that I need to alter the resolution to a specific number so that when I send the image to a 3rd party API, they know how many pixels per inch to print. I only allow image uploads in JPEG/PNG format.
Any solutions in javascript would be greatly appreciated
Thanks!
You have to change the values from pixels to inches and then set the dimensions. The resolution for full hd images is 1024 or 720 pixels per inch
I have a data table that displays 12 rows in a smaller screen. The resolution of screen is 1280x1024. I have to display more rows, say 20, in a device with larger physical screen but with same resolution as of smaller device.
How to go about it?
if really you mean same pixel resolution but different physical size, then answer is you cant (at least not at desktops)
there is some not reliable workaround for phones
Getting the physical screen dimensions / dpi / pixel density in Chrome on Android
If I understand your question correctly, I think CSS Media queries is probably your best bet.
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
I'm building a multiplatform HTML5 canvas game with EaselJS (although I tested without using this library and the problem persists);
I'm loading an image in that is 1280 x 1800 and then rendering it to the canvas.
This runs as expected on all devices except the ipad 1st gen running iOS5.
It loads and draws the image to canvas at 640x900...
I alerted Image.width with a result of 640, so I don't think it has anything to do with the actual rendering to canvas but rather limitations to image size with iOS5?
As a work around I am scaling the image up, so it just appears lower quality on this particular device, but I'm looking for a solution or at least explanation of why this is happening!
here is an example of the problem:
http://kokodev.co.uk/ipadcanvasimageproblem/
I also connected the iPad to the xCode organizer console to see if it reported any errors or memory warnings, but it did not!
I want to load an image of dimensions larger than 2000x2000 pixels on the iPad to show in canvas on a webapp - e.g. 4000x4000 pixels. Due to memory limit, this doesn't work. Could it be possible to load the image into htmlstorage, tile it there, and then show only tiles in the canvas? Or is the limit of around 2000x2000 pixels absolute? I could tile on server, but it is not too easy to do for the current application.
There are some discussion about loading several images which are more than 6 MB in total (e.g. iPad/iPhone browser crashing when loading images in Javascript ), but this does not apply to my case as I have one image which itself is over the memory limit.
I'd try splitting the image as you suggest and see if some of it can be saved to sessionStorage/localStorage. However don't forget there appears to be a 5MB limit for localStorage (Limit of localstorage on iPhone?) on iOS.