ios - image background files for iPhones

Question

We have a background image for our app that needs to be full screen for each device we run the app on. Our problem is the background image is tiling on our iPhone 6S+ (Display Zoom off).

I have drawn in red lines to highlight where the tiling is occurring...

We have created 3 background images of the following sizes...

So, designing for 1x (which is the recommended way to go), our base level 1x background image is 320 pixels wide. Our 2x is 640 pixels, and our 3x is 960 pixels.

The problem is the iPhone 6S+ is 1080 pixels wide and according to this chart, you need to start with a 3x image that is 1242 pixels wide. And this is where I am missing how this is supposed to work.

from https://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

With the above chart in mind, it seems you need a separate image for each resolution highlighted with a red square in the above image. Is this correct? And if yes, how do you label each individual image so that at runtime the correct one is picked?

Answer 1

Three images, named as you have them for background.png, are all you need.

Now let's talk about image views. They display their image using a content mode. The key thing is to pick the correct mode. Aspect Fill is what you probably want here, because it will fill the image view without distorting the image.

One procedure, then, is to use a bigger image than what you have, and configure the image view that shows the image to use an appropriate content mode such as Aspect Fill, so that it sizes the image down to fit (or, to save memory, at runtime you can size it down yourself).

The other possibility would be to leave your image as it is, and solve the issue on the Plus machines by telling the image view to size the image up to fit, again possibly by using Aspect Fill. That might or might not look acceptable; you'd have to try it and see what you think.