Images for Retina-Display-iPhone Versus Normal iPhone

Question

I would like to have images for my UIButtons, screen background etc in my iPhone app.
Will it work for both Retina display and normal display if I have

ButtonImage.png and ButtonImage@2x.png
Background.png and Background@2x.png

OR, should I do any extra coding so that it works for both displays?

ButtonImage.png is looking awkward on Retina Simulator. So, I should have a higher resolution image. So... please help me.

Chandu

Basically - yes, you should have a higher resolution image and yes, for most usages UIKit will automatically use the higher resolution image (named with the @2x suffix). I suggest you bookmark this if you haven't already: http://developer.apple.com/library/ios/#documentation/userexperience/conceptual/mobilehig/IconsImages/IconsImages.html — ChrisH, Jul 12 '12 at 15:11

score 1 · Answer 1 · answered Jul 12 '12 at 15:08

1

UIImage's imageNamed: method automatically looks up the @2x images on the retina device if they're available; no additional coding is required.

answered Jul 12 '12 at 15:08

score 1 · Answer 2 · answered Jul 12 '12 at 15:09

1

If you’re putting the image in your user interface in a .xib file, or if you use the +imageNamed: class method for UIImage, then the @2x suffix is sufficient to load Retina images.

answered Jul 12 '12 at 15:09

Jeff Kelley

19,021
6
70
80

I am using StoryBoard. Does it make any change for your answer? – Chandu Jul 12 '12 at 15:29

score 0 · Answer 3 · answered Jul 12 '12 at 15:09

0

you have nothing to do, ios do the job to choose the right one

answered Jul 12 '12 at 15:09

divol

192
7

Thank you very much! I thought the same divot. Just wanted to confirm it. – Chandu Jul 12 '12 at 15:32

score 0 · Answer 4 · answered Jul 12 '12 at 15:11

Short Answer: Yes, that is the right way to do what you want. UIImage will figure it all out for you.

However, don't forget that you can't just copy and rename a given image (say, Background.png). You need to get an image that is the same as Background.png, but four times the resolution (that's the same as double the width and double the height). Then, you can name that Background@2x.png and everything'll be peachy keen.

score 0 · Answer 5 · answered Jul 12 '12 at 15:14

Here you have to use the simple image and it will work for both, Normal display as well as retina display. You just specify simple images with ButtonImage.png & Background.png in the resource bundle and retina images ButtonImage@2x.png Background@2x.png in the resource bundle.

Now you just need to specify the simple images in the code and retina image will automatically taken when running on the device with retina screen resolution i.e. iPhone 4 and later.

backgroundImageView.image = [UIImage imageNamed:@"Background.png"];

The same code will work and when iPhone 4 with retina display it will consider the image Background@2x.png from resource bundle automatically.

Let me know if you have any other question.

Thanks! I though the same. Wanted to confirm from pros. :) – Chandu Jul 12 '12 at 15:31 — Chandu, Jul 12 '12 at 15:31
Let me know if you need any more help? – AppAspect Jul 14 '12 at 15:24 — AppAspect, Jul 14 '12 at 15:24

score 0 · Answer 6 · answered Jul 23 '12 at 10:11

That's the right thing i mean whatever you are using or describing the way,but second thing you need to do is that allocating the position for buttons. If you will allocating position as a constant or fix by declaring x,y coordinate then it might not work,so try to allocate position of button in dynamic way so that it will take position once retina will call it. Thanks

Images for Retina-Display-iPhone Versus Normal iPhone

6 Answers6