4

I'm having trouble with showing an image on an iPhone. Currently, I have a pretty large image, around 9000x4500. I'm trying to show this image resized in an iPhone. I'm working with the simulator now and it just will not show up. I have some pretty simple code here (using phonegap):

<!DOCTYPE HTML>
<html>
  <head>

    <script charset="utf-8" src = "jquery-1.10.1.min.js"></script>
    <script charset="utf-8" src = "cordova.js"></script>
    <style>
        img.Image {
            width: 100%;
            max-width:100%;}


    </style>            

   </head>
   <body>

     <img src = "FloorPlans/plazaone.png" class = "Image" />

   </body>

</html>

And here's a screenshot of what my simulator looks like: http://i.imgur.com/3YyFS8E.png

Anyone know how to fix this issue?

user1819362
  • 83
  • 1
  • 8
  • 4
    Just a note: on a real device, this is unlikely to work anyway. There is only limited graphics memory and images above a certain resolution can't be rendered directly. 9000x4500 is probably too large. – Mike Weller Jul 24 '13 at 15:21
  • So I found out that large jpg images do show up on the simulator but large PNGs do not. Is there a reason for this, or any workaround? I need the image to be relatively small (400-800 KB, which is what the image is currently at) and to be transparent. – user1819362 Jul 24 '13 at 15:33
  • 1
    It doesn't matter how big the image is when compressed. When it is decoded into memory you will have a full 9000*4500*RGB(A) which is a lot of data. I guess with the JPEG which has no alpha channel you are below some threshold for it to work on the simulator. – Mike Weller Jul 24 '13 at 15:37
  • The image renders perfectly fine on Android, and I'm using a pretty crappy android phone so the images should work on iPhone as well. I have the image local to the application within its assets and resizing it to fit the screen. EDIT*: The images also don't take a long time or anything on the android phone, it appeared almost instantly. I just don't understand why it doesn't work on ios. – user1819362 Jul 24 '13 at 15:41
  • Hmm... I believe PNGs get optimized before rendered on the device. You can disable this in the build settings to see if it will display without the modifications. See [this page for info](http://stackoverflow.com/questions/8216515/why-does-png-format-get-changed-when-on-iphone-or-ipad-device). – Mattiavelli Jul 24 '13 at 15:42

1 Answers1

3

Figured out why it wasn't working. It seems that if one tries to put an image on iOS through HTML, there is a certain limit of what resolution it can handle (not for jpgs it seems, but for GIFs and PNGs, might have something to do with transparency). All I had to do was resize my pictures down to 50% of their original size and they worked.

user1819362
  • 83
  • 1
  • 8
  • Worked perfectly for me! Any idea why this restriction is relaxed for jpgs alone? – nizam.sp Jun 26 '15 at 07:34
  • Unfortunately this did not do the trick for me. My images are 600 x 480 px and still not showing. Both png and jpg. – Vincent Apr 13 '23 at 23:09