I would like to make my splash screen images 960x640 to support iPhone 4 Retina display. I do not have an iPhone 3G to test with so I would like to know what will happen if I do this with my splash screen image? Also, can I double the resolution of images I use for image headers to support Retina display? Will the image downsize itself in the display on the 3G or will it go off the screen? What is everyone else doing to try and support iPhone 4 Retina Display?

Use larger retina type images..then.. in the splash screen settings, Background Image Scale option, choose Full Screen, Preserve Ratio. Bet it works nice on both devices.

For backgrounds/icons/etc you can create 2 different versions of your images. For older devices name the image: image.png for the retina display name that image [email protected]. Only ever call the image.png file, iOS will display the appropriate image based on the hardware.

@cteselle: Great tip!!! Forgot all about this.

@cteselle - That is great information. Thank YOU!

1.5v I have tried using 320x480 [email protected] Full Screen, Preserve Ratio and 640x906 [email protected] Full Screen, Preserve Ratio. Both don't produce the clear splash screen. any ideas?

The 320x480 image should be named image.png and the 640x960 image should be named [email protected]. Also preserve ratio on using a 640x906 image would probably a blurry image because the iphone 4 screen is 640x960 and you are stretching a 640x904 image to 640x960 although you said preserve ratio I would think this would cause problems. May suggestion is to resize the 640x906 image to 640x960 and make sure you have the files name correctly.

Typo on the hi-res image size*640x960. I tried renaming the image file to [email protected] (http://theplacefordee.com/[email protected])with Full Screen, Preserve Ratio. The end result is just the center of the image is shown. No resizing for the screen. thoughts?

If the images are sized properly for the screens I leave the Background Image Scale / Position setting on the default which says Select. Also, what are you testing this on a device or the simulator? One more thing make sure in the control panel that when you specify the name of the background image you only use image.png and not [email protected] iOS will automatically use the @2x image when it detects a retina display device.

Testing on device. I am pulling the images from remote. So my question is how will the app know to pull [email protected] remotely?

Ahh that is the problem I don't think that is possible when pulling from remote server. You will need to use images locally stored on the device if you want to be resolution independent. Maybe some else knows a workaround, but I don't I always use locally stored images when creating apps.

I went ahead and added to project. Which fixed the splash screen. Any idea how to get a retina header image? sorry for the many questions

Do the same thing. When specifying your header image name use whatever.png and then include in the images directory [email protected] and then iOS will automatically use the appropriate image when retina display is detected. I would recommend creating the retina display image first and then save the image at 50% and use that for the regular image file. If you try to upscale the image you will probably pixelate the results.

I'm trying to do the same thing with my header image, but having problems. I made 2 images for my header, one is 300x80 and the one for retina is 600x160. In the header image settings in buzztouch I set the dimensions for the header to 300x80 and pointed it to logo.png in my BT_Images folder. In my BT_Images folder I put the logo.png at 300x80 and [email protected] at 600x160. The iPhone with the retina display is still showing the 300x80 image no matter what I try. If I completely remove the 300x80 image from my BT_Images folder and rename the 600x160 image to logo.png it doesn't scale the image down, you basically see the image much larger. I also tried changing the settings in buzztouch for the image to be 600x160, but its still showing the low res image. It's almost like rather than scaling the image properly it thinks its displaying the image on a non-retina iPhone. Any ideas?

In the Image Header > Image Name Small Device section you should have logo.png. Then in the BT_Images folder put logo.png and [email protected]. That is all you should have to do to make the header image retina display compatiable.

Yeah, no luck. It's still scaling the 300x80 image up on the retina display... Oh well.

Are you using the simulator or an actual device. I have always tested retina display images on a device and it works fine if I have the @2x image in the BT_Images folder. That might be the problem if you are using the simulator.

Actual device, iPhone 4S running iOS 5. We've tried the same thing with other images throughout the app and it seems to work OK in other places which makes me think there is something else going on. Short of redownloading the source code from the server and starting over I'm not sure where to look. But we're basically done with the app so if there is one low res image on it I'm willing to live with it. Who knows, maybe Apple will figure it out when I submit it for approval ;)

Has anyone figured this out? I'm having the same problem. Nick

From what I can tell, this must be a Buzztouch bug. I'm building my app for low res, hi res, and iPad devices supporting iOS 4.3 and above. My images are Header.png (300x130), [email protected](600x260), and LargeHeader.png (768x1024). Low res and iPad versions are fine, but I can't make any Retina headers display in the simulator or on the device. I've restarted xcode, redownloaded the source, deleted and re-added images, and tried the old extensions (Header~iphone.png, Header@2x~iphone.png) to no avail.

Are you switching the simulator to iPhone (Retina) under the hardware menu? The on screen simulator will look like the iPhone 4 but it is actually running at iPhone 3G resolution. You are doing everything right by adding the @2x to the file name, so check the hardware display setting mentioned above.

Under the devices menu, I'm testing: iPhone for low res iPhone (retina) for high res retina displays iPad for iPad

When you select retina is it not showing the high res image? You are loading the images into the images folder in Xcode right? I don't think the @2x will work when pulling the image from a URL.

Moto110 is correct you have to add the image files to the xcode project.

When I had this issue with my project, my images were in the BT_Images folder in Xcode. I knew I was doing it right because it was working with other images throughout my project, just not the header image in my main menu.

You know come to think of it I ran in to a similar problem once where the image would not show the @2x image in place of it I got a Question Mark image. I worked around this problem by picking a new name for the image that was giving me problems and that resolved the problem. As to what caused that to happen is a mystery. I assume a bug in the code. Helpfully this helps.

Tonight I tried renaming the header images as you said, changing the filetypes from png to jpg, and changing the header layout options all to no avail. In reading some other forum posts, it seems that others who have had this problem encountered it only on some screens, whereas on others the retina header would display correctly. If it provides any insight, on all five of my screens with headers, I have this problem. Since xcode automatically should select the @2x images, I think the problem must be somewhere in the Buzztouch settings... This problem is blocking me from releasing the final version of my app. I WILL PREVAIL. Nick

My followup after precisely two months: I now have a Retina iPhone so I could extensively test this issue. I made a very, very clear distinction between the lowres and hires images that I'm using which helped greatly, but point to a different problem. The @2x image is technically pulled and referenced correctly, but it displays looking like crap! Totally pixelated hence why all this time I thought it was the low res header image. Anyone have any ideas or any tests I could try? Nick

QuiggityBiggity- I know this thread is ancient, but I was looking through the forums on an unrelated note and think I found the answer to this. If you have rounded edges turned on for the images, it will not show the high-res (@2x) version of the image. I deleted the value I had in "Image Corner Radius" fields under the "Header Image Layout" section in buzztouch and POOF! Hi res images after refreshing the app. Hope this helps you or anyone else who stumbles upon this thread.

Johnnylonz, You are a genius. Under any screen, I selected "header image layout" and removed the value from "image corner radius". Hi-Res header image now displays. It seems that there's no way to have the rounded corners with a hi-res header image, (unless you edit the image with a photo editor). Thanks a million!

No problem! Actually all the credit goes to Moto110, he's the one who discovered the fix in another thread. Crazy how simple the solution ended up being. It is UNREAL how much time I spent struggling with this...