Confusion about @2x @3x Xcode images

Question

The apple guides haven't helped me too much with this but I am starting to get serious about IOS development and was taken aback when I saw images go from @1x to @3x.

One source I found said they were based on sizes. For example:

If you are working on an inferred VC size and your image is 30x30 and you run that on a iPhone6 then your image should be 30x30 for @3x, 20x20 for @2x, and 10x10 for @1x.

Another source I said mentioned that it was based off the images resolution and not the size of the image.

Could someone clear this up for me and explain how to make sure my images look professional for all screens?

Thanks in advance!

Answer 1

When the first iPhone (and SDK) came out, all images were 1x (1 pixel of the image = 1 pixel of the screen), because that's all we had to care about. On that phone there were 166 horizontal or vertical pixels per inch (dpi). So to display an image that stretched from the left edge to the right edge, our image would need to be 320 wide (because that's what Apple told us - we didn't have to count pixels) by whatever height we wanted. Let's say 100 pixels tall. We'd name that image MyPhoto.png (because Apple told us the iPhone OS worked best with PNG images) and we'd display it.

When the iPhone 4 came out with the retina display, its retina display had 2 times the horizontal and 2 times the vertical resolution of the older phones. So now we needed higher resolution images to get the best looking interface. We were still displaying just a 2" wide image, but it would need twice the number of horizontal pixels and twice the number of vertical pixels (4 times the total number of pixels) to fill the same space. So now our image needs to be 640 pixels by 200 pixels. Since our app would still need to support the older phones as well as the new phones, we didn't want to just replace the old image with the new one. We needed a way to support both. So the old images kept the same name they had before (we didn't append "@1x") and the new images got the "@2x" filename extension to indicate they were twice the resolution. So we'd name this larger image MyPhoto@2x.png.

A common question is why not use just the higher resolution images on both old and new phones? With scaling, both appear to work great. The problem primarily is that the iPhone, especially the older phones, had very limited memory to work with. Using images that are 4 times larger than they need to be is really hard on that limited memory. That's why we had to have both 1x and 2x images in our apps.

For our sanity, we would still just use 1x while designing the interfaces. So screens remained 320 pixels wide in our code, even if we were going to display them on a retina display that was 640 pixels wide. If we wanted to draw a 1 pixel wide line on the retinal display, we'd make it half a pixel wide in our code.

With the larger screen of the iPhone 6 Plus, Apple had to pack even more pixels on the screen to maintain the high resolution customers came to expect. So now we're into 3x images. However, the iPhone 6 Plus doesn't really have three times the number of horizontal or vertical pixels. But again Apple has kept us sane by just asking us to supply "@3x" images, and it worries about scaling them down a bit on the device. As before, we still need to support smaller screen resolutions too, so we still include "@2x" and the 1x images in our apps.

So, to continue our example, the @3x image would need to be three times the width and height of the 1x image. So now we need a 960 wide by 300 pixel tall image. We'd name it MyPhoto@3x.png.

Notice that although I mentioned earlier something about a 166 dpi display, that's not really important when creating these images. In your photo editing app you don't really care if the image is 166 or 72 dpi or anything else. The only important part is the number of pixels in width and height of the final image we export.

So to answer your question (hopefully), you'll want to include all three of these images in your iPhone compatible apps. You can skip the @3x image for iPad-only apps, because there's no 3x screen yet for the iPad. But continue to think only in the 1x size when working in Interface Builder and code.

For example, now to display a 1 pixel wide line on the iPhone 6 Plus, you'd draw a 0.33 wide line rather than a 1 point line. Of course, you still want to support all of the other screen resolutions too, so you'd use code like this to set your line width:

let lineWidth = 1.0 / UIScreen.mainScreen().scale

This will give you 1.0 for the non-retinal iPhones, 0.5 for the iPhone 4, 5 & 6, and 0.33 for the iPhone 6 Plus.