9

I am asking this question just for information and to clear my concepts about images in iOS application (Retina and non-retina devices).

What I currently do is

When I develop an iPhone application and I have to show an image lets say on UIButton using Interface builder I take two images lets suppose submit.png button image of following sizes

  1. 100x100 px (submit.png)
  2. 200x200 px (submit@2x.png) for retina display

And in Interface builder I will set the size of UIButton 100x100 px and its just works perfectly.

Question:

Why don't we place only single image lets say submit.png

  1. 200x200 px (submit.png)

And set UIButton size 100x100 px in interface builder and same image will be used in both retina and non-retina devices.

What is the actual reason of using two images rather than one single image of retina size?

Another similar question,

iPhone 5 is only available in retina display but we have to place its Default images as Default-568h@2x.png. Why at 2x?

Irfan DANISH
  • 8,349
  • 12
  • 42
  • 67
  • Have you tried removing normal images and directly giving retina image on interface builder. i.e. directly assign submit@2x.png on UIButton through interface builder. We generally do like that and it works in normal device as expected as UIButton size would be same I guess – Janak Nirmal Jul 19 '13 at 05:00
  • Yes I normally do the same as you mentioned but i want to know the reason why Apple docs says to use two different images and still i can't get any authentic source information. – Irfan DANISH Jul 19 '13 at 06:14

5 Answers5

9

In ios Concept of image its also clear if you read this doc Custom Icon and Image Creation Guidelines

For Example if you want to create image

100 x 100 px so it must with 163 Resolution ppi submit.png NON-retina device

200 x 200 px so it must with 326 Resolution ppi submit@2x.png Retina device

FOR iPad:-

400 x 300 px so it must with 264 Resolution ppi submit@2x~ipad.png Retina iPad device

200 x 150 px so it must with 132 Resolution ppi submit~ipad.png Non-retina iPad device

Take a Look this Image:-

enter image description here

Image source from This

We inculcated @2x when we want to specify different versions of an image for iPad and iPhone. The inclusion of the @2x modifier for the high-resolution image is new and lets the system know that the image is the high-resolution variant of the standard image.

That is the key change required for the OS to size the window to fill the iPhone 5 display.has posted a writeup on this and other size-related tweaks you might need to make.

Hope this is useful info for image resolution and it's size.

Nitin Gohel
  • 49,482
  • 17
  • 105
  • 144
  • Can you please tell me from where you got information about resolutions? like 163 and 326 resolutions for iPhone. As my designer design at 72 DPI in retina size and then make image smaller with same DPI and convert images to non-retina size. – Irfan DANISH Jul 19 '13 at 07:02
  • 1
    http://www.apple.com/iphone/specs.html take a look this there is ratine apple iphone5 product **1136-by-640-pixel resolution at 326 ppi** so non ratine conraint it half 163 – Nitin Gohel Jul 19 '13 at 07:08
  • what does that mean? we should design app at 320x480 px size with 326DPI for retina and 320x480 px size with 163 DPI for normal device? or we should design 320x480 px in size in 72DPI for normal and 640x960 px in size in 72 DPI for retina? – Irfan DANISH Jul 19 '13 at 09:05
  • 1
    i am tanlking about ** PPI** we should design app at 320x480 px size with 326 ppi for retina and 320x480 px size with 163 PPI do you knw what is Diffrent in DPI and PPI...? check this:-http://www.imagescience.com.au/kb/questions/31/The+difference+between+PPI+and+DPI ask about it your designer for mor info about DPI and PPI – Nitin Gohel Jul 19 '13 at 09:18
4

The main purpose of using non-retina images is the performance enhancement and image quality on older devices due to the required down-scale operations.

So for older devices performance you should use non-retina images.

Nishant Tyagi
  • 9,893
  • 3
  • 40
  • 61
  • Is there any solution for we can use only one image for older and newer version. I mean can we do it with any type of code or something ?? – Bhavin_m Jul 19 '13 at 04:56
  • I think NO. because we need non-retina images for older devices. And if we use retina images then performance degrades. – Nishant Tyagi Jul 19 '13 at 05:00
  • It means we must have two type of image one is non-retina, another is retina if app need to support in older device. – Bhavin_m Jul 19 '13 at 05:04
  • Whats the difference between those 2 images. Just resolutions difference. But with todays new devices. Do we actually need a non-scaled image as well? – SSS Oct 10 '14 at 07:39
1

The reason as to why we have to provide 2 images is because there are still people running the early devices that do not support retina display. They are lacking in the pixel amount as people running the retina, so we provide the normal amount. The thing with the iphone 5 requiring the @2x in the image file is because the @2x filename is the standard convention dealing with the retina display images.

That is why when you asked why don't we just put the 200x200 image in the 100x100 button. Well, if you're running a retina device, the image in that button will look like what you drew; however, if you're running something like a 3gs, that has no retina, then your image in that button will most likely come out to be pretty blocky, or blurry as the pixels are not matching the device's ratio.

Hope that helps clear anything up!

user2277872
  • 2,963
  • 1
  • 21
  • 22
1

Yes, you can use just the retina images for both retina and non-retina devices. If you use them in imageviews, buttons, etc, make them scaletofill/aspectfill/aspectfit or whatever you want.

But the problem with this is that the unnecessary larger sized images will be loaded in memory, and the resizing of images is going to need some processing as well.

Using separate images does increase the App Bundle size, but reduces the actual ram usage by the application when running.

Muhammad
  • 3,169
  • 5
  • 41
  • 70
Sagar D
  • 215
  • 1
  • 8
-1

1- If you want to support your application both retina and non retina devices you need to follow the filename standards. If you want to support only retina devices then no need to add default image (button.png). If you want to support both retina and non retina devices need to add both images as well as in interface builder no need to add full name like @2x. You just add the name of the image.The main fundamental is the name of the both images should be same. Ex: Non retina-->Button.png, Retina-->Button@2x.png, IE-->Button

2 - iPhone5 is has retina display only. So if you add default image for iPhone5 it automatically runs in iPhone5 device. Apple is following the standards. So we need to follow.

Note: Xcode will automatically takes care about all these kind of images.

Muhammad
  • 3,169
  • 5
  • 41
  • 70
Ganesh
  • 524
  • 1
  • 4
  • 16