Startup image in webapp for Retina display?

Question

Anybody know how to get iOS to display higher resolution startup image when using ? Currently I'm stuck with 460x380 image which obviously looks horrible when displayed on iPhone 4's high dpi display. I tried the @2x trick but didn't seem to work.

Any ideas or workarounds?

Answer 1

The "@2x" trick works. Must have been something wrong with your images.

You want two files. Default.png and [email protected]. The first one should be 320x460. The second should be 640x920. I promise it works.

Answer 2

Use a large image and then specify a smaller size in the the HTML. Make a high-res version at 920x760 and then use CSS to set the display size for that image to 460x380, something like this:

<img src="highresimage.png" style="width:460px; height:380px">

Where highresimage.png is the 920x760 image.

This should work correctly on both low and high-res displays, though you'll be sending more data than necessary to low-res displays. It might be possible for Javascript to detect the retina display and set the image source dynamically, though I'm not sure if that's possible.

Answer 3

I've seen cases where XCode messes up in this situation. In addition to double checking the image size, (320x460) it doesn't hurt to:

1. Make sure both images are in the build. (Right/Option click on the files header and select "target membership" and then make sure the checkbox is checked.)
2. Do a clean build.
3. Delete all of the build files in your build directory. (Clean doesn't get ALL of them.)
4. Delete the app from the target phone/sim.

I know this may seem obvious or unnecessary, but I banged my head against the same problem and the clean/delete/delete sequence fixed it.