Sizing of Images and Retina Displays

Question

Quick question.

If designing an image for a UINavigationBar do I simply design one image 320 x 64 px and then scale accordingly? So:

• 320 x 64 for iPhone
• 640 x 128 for iPhone 4/5 (and add the @2x)
• 960 x 192 for iPhone 6 (and add the @3x)

Something which is confusing me is the various display sizes and how large to make the images:

I've think I've got the display resolutions correct as:

• iPhone 320 x 480
• iPhone 4 as 640 x 960
• iPhone 5 as 640 x 1334
• iPhone 6 as 750 x 1334
• iPhone 6 Plus as 1242 x 2208

If I don't just create one image and scale it up, do I have to create 3 images for each phone?

e.g. iPhone 4:

• 640 x 128 for Standard
• 1280 x 256 for @2x
• 1920 x 384 for @3x.

And then the same for all the other phones?

I'm sure that can't be correct, but somewhat confused about this at the moment.

Thanks in advance for any help.

Answer 1

I would not recommend scaling an image up, as this will result in a marked loss of graphical fidelity (aka. 'jaggies' or blurriness) on higher resolution devices. If anything, you should err on the side of scaling down.

Your options:

1. Design images for each logical coordinate space. For a navigation bar, for example, this would entail having bar backgrounds in standard, 2x and 3x sizes. More, if you wish to support navigation bars in landscape mode on an iPhone.

   Note, however, there is no guarantee how wide devices even within the same logical coordinate space (ie. iPhone 5s and iPhone 6) will display a navigation bar, so you will probably want to use the UIImage method resizableImageWithCapInsets: to create an image that stretches all the way across the navigation bar no matter how wide it is.

   https://developer.apple.com/library/ios/documentation/uikit/reference/UIImage_Class/index.html#//apple_ref/occ/instm/UIImage/resizableImageWithCapInsets:

   It's worth noting that if you're writing for the iPhone you could probably forgo the use of 1x images as no iPhones that use 1x images are supported any longer. On iPad, though, you still have to contend with the iPad 2 and original iPad mini.

2. Create a 3x image and use it for everything. Allow iOS to automatically scale it down as needed. This could introduce some graphical flaws (although not nearly as bad as scaling up, and possibly not even noticeable) and is a bit less efficient - ie. it consumes more memory and theoretically could take longer to load. This is somewhat inelegant and I wouldn't recommend it.

3. Your last option is to embrace the flat design principles in place since iOS 7 and simply forgo the use of detailed/textured elements when possible. As the sizes and densities of iOS device displays increase, you may find that this results in fewer headaches for both you and your designer - and it might fit better with the iOS 7+ design aesthetic.

Another thing...

I'd recommend learning about the different between points and pixels. This will help get your head around a lot of this.

https://developer.apple.com/library/ios/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/GraphicsDrawingOverview/GraphicsDrawingOverview.html#//apple_ref/doc/uid/TP40010156-CH14-SW7

Basically, you don't need to design for different phones, you need to design around 3 (well, really 2 at this point) logical coordinate spaces. Through the use of resizable images as described above and - optionally - creating larger images to fill up more space on larger devices, you shouldn't really have to create more than 2-3 versions of any image.