Scott Chu wrote:
Last time I saw someone asks why Safari on iPad doesn't show some 1920x1440 jpeg with real size & I solved that puzzle. You have to use a progressive-encoding jpeg. However, I find another different problem.
Say, demo.jpg is a progressive-encoding jpeg with 2000x3000 & I upload it to my website. I then access it via url ...demo.jpg, Safari will show it with 2000x3000 size, perfect.
Now I make a most-simple html file named mypic.html. This html has only img tag with src=demo.jpg or src=demo.jpg width=2000 height=3000 inside body. Now I access it via url ...mypic.html. This time Safari show a very small icon of a question mark?
Does anybody know why the latter case fail?
The question mark icon means that the image could not be found. You don't provide much detail but, If your HTML file only has an IMG directive like img src="myopic.HTML", then this is a relative URL and the image must be in the exact same location as mypic.html. If it is not, the image will not be found. A BASE directive can be added to the HTML HEAD if the image is located elsewhere.
No, I mean when I type url e.g. "http://myweb.com/a.jpg" it display ok" but If I write a html named "b.html" with "<img src="a.jpg"> & save it under the directory with a.jpg. Now I type url "http://myweb.com/b.html". It can't display the image correctly. I'm pretty sure the image location is correct. You can try if you have a iPad.
Message was edited by: Scott Chu
Message was edited by: Scott Chu
Same problem here!
But i think the resolution doesn't matter.
Here is a test page:
You should see three images. All three has a resolution of 2560 x 1600.
If you open this page in your computer's browser, you can see all the images.
If you open this page on your iPad, the first image is missing... ***?
BUT: If you type the direct url of the image, it displays correctly...
Maybe, the compression is different?
There is a limit in Safari for the total space allocated for images, etc. on a web page. Your single images do not exceed this limit but the combination of all three on a page do. Since the iPhone 4 has twice the internal memory of the iPad (512MB vs. 256MB) this limit is probably higher allowing all three images to display.
I tried with only ONE image - and the problem is the same. I tried it after quit ALL applications, and reset the device. Still the same problem.
After that I try to load 8 different images (all with 2560x1600 resolutions) AT THE SAME TIME and there was no problem, but if I trying to load only that previous picture, the problem is the same. Again. You can try it on your device:
Instead of the first image there is an icon.. The first image is: http://clearbox.hu/ipad/image1.jpg <- iPad doesn't show this image in an <img> tag, only if you open it from the relative url
Ok... Here is what I found out about image1.The image was set to progressively download into a browser. For some reason an image with those dimensions won't progressively download into a browser on the iPad. I open the image in PhotoShop and saved it with progressive download turn off. I open image2 in PS and saved it with progressive download turned on.
In the above link image1 loaded and image2 didn't. Why? It could still be a ram issue in Safari. Progressive downloads take more ram. If I half the dimensions of image1 with progressive download turned on it will load into Safari.
But then again who really knows why?
I just ran into the same situation. <img> tag does not open in Safari / iOS, but direct URL does open. Same HTML page opens on anyother browser including Android devices.
The problem seems to be related to progressive mode, as you indicated.
I did the following test using imagemagick:
Source image file is 01.jpg and it is 3000x2250
1) Created a simple page with single tag <img src="10.jpg" />
2) convert 01.jpg -interlace JPEG 10.jpg
Image does not display
3) convert 01.jpg -interlace none 10.jpg
This thread is old, but I am facing this problem on latest version using iOS 7.1