What is the meaning of @ 2x for Retina display applications?

Question

I understand that a Retina display has twice as many pixels as non-retina displays, but what is the difference between using the @ 2x version and taking and displaying a 512 x 512 image and keeping it in frame size?

To clarify:

if I have a 72 x 72 button. The correct way to show that there is an iPhone

image.png = 72x72

[e-mail] = 144 x 144 <--- Fixed: TY

But why not just use 1 image:

image.png = 512x512

and follow these steps:

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 don’t know what it is, another, maybe a smaller file size?

Thanks for the education!

Answer 1

There are several good reasons for calibrating your images correctly, but the clarity of the image should be the main one: when resizing images, you often find yourself in artifacts that make the image dirty or pixelated. By creating images with the correct size, you will know exactly what the end user will see on his screen.

Another reason would simply be to reduce the overall file size of your binary: the 16x16 icon takes an order of magnitude less bytes than the 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 / border code to go with them. If you know the size, you can save a lot of headache.

Answer 2

Because images may not display correctly when resized. Also because large images use more memory. But if both of them are not problems for you, you can use one image to show the retina and not the retina.

Answer 3

Because large images consume a lot of memory and CPU / GPU cycles. Another reason is that zooming out causes quality problems at the pixel level.

Answer 4

In addition to additional memory and a processor, downsampling is inherently lost. Good clear lines turn into crud.

Answer 5

The @ 2x naming convention exists if the original image is the same size as the displayed image. You can then have the app icon 57x57 for iPhone without a retina and the app icon 114x114 to display the iPhone on the retina screen.

Answer 6

The main advantage of using 2 images is that both photos can be hand-made by designers, so everything looks great, and you don’t need the necessary or decreasing code that saves energy, slows down productivity and may contain errors.