Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

iOS: Preparing background images for applications

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?

like image 563
Nikita Zernov Avatar asked Jul 07 '16 16:07

Nikita Zernov


People also ask

How long does iOS app background take?

For the time you can request after going to background if I remember correctly before iOS 7 it was up to 10 minutes, on iOS 7 it was up to 180 seconds and I haven't checked it personally on newer versions.

What is 1x 2x and 3x in iOS?

1x, 2x, and 3x images allow developers and Apple to optimize app presentation based on the user's device, whether an entry-level iPhone or the most expensive iPad. Conceptually, 1x, 2x, and 3x images are the same image -- simply at different sizes.

What happens when app goes background iOS?

It will be resumed when the application is brought back to the foreground. However, in the latter case you should still be prepared for your application to be terminated at any time while it's in the background by cleaning things up on your way to the background.


1 Answers

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.

like image 80
OhadM Avatar answered Sep 24 '22 17:09

OhadM