iOS: Preparing background images for applications

Nikita Zernov picture Nikita Zernov · Jul 7, 2016 · Viewed 26.2k times · Source

Mostly every iOS application has a view with an image as background. Is there any image sizing guide out there? For example here is an iOS screen designed in Sketch:

enter image description here

As you can see there is a background image. Now there are lots of Apple devices every application should support. The new iOS 10 supports all devices from iPhone 5 to iPhone 6s Plus. They have different screen sizes and resolutions. When creating Xcode assets, I am giving 3 background images with different sizes - @1x, @2x, @3x. What sizes should they be?

Answer

OhadM picture OhadM · Jul 10, 2016

The way I see it you have 2 options:

  1. In here you will find the resolutions of the iPhone's:

iphone screen resolutions

  • You don't need the @1 image since you don't support iPhone 4 and 4s (iOS 10).
  • @2 is for iPhone 5,5c,5S,6 and 6s so basically you can create @2 image of the highest resolution which is the iPhone 6 and this image will work well for the iPhone 5 family.
  • Or, you can create an image with resolution for each iPhone and using hard coded logic set the image for each phone. i.e: if iphone5c { setImage("iphone5cImage") } etc etc..

  1. The simplest solution is to create 1 image with the highest resolution. The @3 is the highest for the iPhone 6S+ and it will look amazing for the rest. Don't forget to set the image view as aspect fill.

Also, don't forget to check this thread: How to handle image scale on all the available iPhone resolutions?. It will give you clues of what exactly you are dealing with. TL;DR, It's the options I wrote.