iOS: Preparing background images for applications

Question

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:

Answer 1

Take a look at the page on documentation, there is Static Launch Screen Images, and you can catch sizes from there.

You can get a device screen size, using

CGSize screenSize = [UIScreen mainScreen].bounds.size // (Objective-C)


let screenSize: CGSize = UIScreen.mainScreen().bounds.size // (Swift)

And after you can programmatically select an image you want, from set of an images from the bundle. Or to make a big one image for resizing, using knowledges from documentation, and to resize an image accordingly. Or...your choice.

Different "sizes" @2x, @3x is scale. And here is the nice explanation.

Answer 2

If you still have the same problem then you can try this one. For this you have to add only one image with good resolution and below code..

UIImage *bgImage = [UIImage imageNamed:@"art_background_star@3x.jpg"];
CGSize screenSize = [UIScreen mainScreen].bounds.size;
UIGraphicsBeginImageContextWithOptions(screenSize, NO, 0.f);
[bgImage drawInRect:CGRectMake(0.f, 0.f, screenSize.width, screenSize.height)];
UIImage * resultImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
UIColor *backgroundColor = [UIColor colorWithPatternImage:resultImage];
self.view.backgroundColor = backgroundColor;

Answer 3

The background images you only need to give are @2x and @3x, because @1x devices are now long gone in the dusty pages of history.

Speaking of @2x and @3x, the image resolutions you give to the developer should be the same with the highest resolution iPhone that uses that given size.

For @2x, that is the iPhone 6, which is 750x1334, and for @3x, the iPhone 6+ which is 1242x2208.

Down-scaling shouldn't be a problem because the aspect ratios of all iPhones that support iOS 10 are the same(16:9).

Note for Developer(s):

The UIImageView will then down-scale the images appropriately,
provided: 

1. you created an image set with the provided @2x and @3x images, 
2. correctly constrainted the UIImageView to the edges of the superview, and
3. selected the Content Mode of the UIImageView as Scale to Fill or Aspect Fill.

Answer 4

There is design nuance in full size background images. Mostly if the scale aspect fill good enough for different sizes you need to design only for the biggest device size after that the rest of them scale to fit. Sometimes some part of background needs to remain visible or if want to keep a low memory footprint for small device sets you need to create smaller alternatives.

Whenever you make a decision with the design size of asset you need to create @3x,@2x variants.

One more thing I need to point out about vector designs. If your design is made only with vectors you can choose pdf vector export. Storyboards can accept vector assets and they are doing very good when scaling in full backgrounds.

Answer 5

There are 3 kinds of Apple Devices (iPhone and iPad) that is

Normal device which terms to 1 pixel = 1 point@1x (Older iPhone and iPad devices)

Retina device which terms to 4 pixels(2 x 2) = 1 point@2x (iPhone 5+)

Retina iPhone6 and iPad which terms to 9 pixels (3 x 3) = 1 point@3x (iPhone6+)

For iOs 10 that will not support iPhone 4s so you only require @2x and @3x images.

As you can see above attached image iPhone 6 also support @2x Scale so use image size for @2x is of 750*1334 and for @3x is of 1242*2208 with image mode.

Answer 6

The way I see it you have 2 options:

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

• 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..

---

2. 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.