1

I understand that the Retina display has 2x as many pixels as the non retina displays, but what is difference between using the @2x version and taking and taking the 512 x 512 image and constraining it via the size of the frame ?

To Clarify:

if I have a button that is 72 x 72 The proper way to display that on an iPhone is to have a

image.png = 72x72

image@2x.png = 144 x 144 <---Fixed :) TY

But why not just use 1 image:

image.png = 512x512

and do something like this:

UIImageView *myImage = [[UIImageView alloc] init ];
[myImage setImage:[UIImage imageNamed:@"image.png"]];
[myImage setFrame:CGRectMake(50, 50, 72, 72)];

I am sure there is a good reason, I just dont know what it is, other then possibly a smaller app file size?

Thanks for the education!

Nathan
  • 1,609
  • 4
  • 25
  • 42
  • BTW 72*2 is 144 not 114. In my answer below, I used the application icon sizes for iPhone (57x57 and 114x114) as examples. – bneely Feb 24 '12 at 21:03

6 Answers6

4

There are several good reasons for sizing your images correctly, but the main one would have to be image clarity: When resizing images, you often end up w/ artifacts that make a picture look muddy or pixelated. By creating the images at the correct size, you'll know exactly what the end user will see on his or her screen.

Another reason would simply be to cut down on the overall file size of your binary: a 16x16 icon takes up orders of magnitude fewer bytes than a 512x512 image.

And if you need a third reason: Convenience methods such as [UIImage imageWithName:@"xxxx"] produce images of actual size and usually do not need additional frame/bounds code to go along with them. If you know the size, you can save yourself a lot of headache.

Mike Fahy
  • 5,487
  • 4
  • 24
  • 28
2

Because images may not be displayed correctly when resized. Also because larger images use more memory. But if both these are not issues for you, you can use one image for both retina and non retina displays.

sch
  • 27,436
  • 3
  • 68
  • 83
  • This is the correct answer. In most cases (unless one is designing a high graphical game) no can tell the difference between retina and non-retina pics. That is from experience. – Sam B Mar 05 '15 at 14:33
1

Because large images consume a lot of memory and CPU/GPU cycles. Another reason is that scaling down an image causes pixel-level quality issues.

Costique
  • 23,712
  • 4
  • 76
  • 79
1

Besides the extra memory and CPU, downsampling an image is inherently lossy. Nice crisply rendered lines turn to crud.

smparkes
  • 13,807
  • 4
  • 36
  • 61
  • There would be no extra memory or CPU used on the device if the down-sampling would be made at compile time. The second argument is valid though. – Rad'Val Apr 24 '12 at 11:18
  • 1
    The whole point of the question (as I read it, anyway) is about doing the resizing at run time. – smparkes Apr 24 '12 at 14:32
0

The main advantage of using 2 images is, that both pictures can be handcrafted from the designers so everything looks fine and no up- or downscaling code needed, which cost energy, slows performance and may contains bugs.

Karsten
  • 1,869
  • 22
  • 38
0

The @2x naming convention exists in case the source image is exactly the same size as the displayed image. Then you can have a 57x57 app icon for non-retina iPhone, and 114x114 app icon for retina display iPhones.

bneely
  • 9,083
  • 4
  • 38
  • 46