Full page background image sizes after new Iphone models has been released (Xcode)

Question

here are the iPhone Resolutions as you know;

Iphone Xs Max 414x896 points Render at 3x, 1242x2688 px
Iphone Xr 414x896 points Render at 2x, 828x1792 px
Iphone X, Xs 375x812 points. Render at 3x, 1125x2436 px
Iphone 6+, 6s+, 7+, 8+ 414x716 points, Render at 3x, 1242x2208 px
Iphone 6, 6s, 7, 8 375x667 points, Render at 2x, 750x1334px

Let's assume I would like to create a full page background image. Can you confirm x, @2x, and @3x sizes please?

Is 375x667 px true for @x?
Is 750x1334 px true for @2x?
What about 3x size? 1242x2688 ( Reference should be iPhone Xs Max for the @3x size?)

please have a look to answer at https://stackoverflow.com/a/52888548/2892357 — Ihar Katkavets, Oct 19 '18 at 10:01

Ihar Katkavets · Answer 1 · 2020-10-04T19:33:28.527

THIS IS UNOFFICIAL TRICK TO DEFINE IMAGES FOR DIFFERENT SCREEN SIZES (iPhone XS Max, iPhone XS, iPhone Xr).

I found a trick. In my application we have launch screens for all iPhone Devices (see screenshot).

Next screen which appears after Launch screen is Login. It should have the same image like Launch screen. Unfortunately Xcode creates the following image set in Assets out of box (iPhone 1x, 2x, 3, iPad 1x, 2x - see image).

And during transitions from Launch Screen to Login screen I see artifacts because Image stretching on iPhone X, Xs Max, iPhone Xr

To fix the issue I copied Contents.json file from LaunchImage.launchimage folder to BackgroundImage.imageset folder in Finder (see steps on image below)

UPDATE the content of AppImages.xcassets/BackgroundImage.imageset/Contents.json file:

{
  "images" : [
    {
      "idiom" : "iphone",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "1x"
    },
    {
      "idiom" : "iphone",
      "filename" : "retina4640x960.png",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "retina4640x1136.png",
      "subtype" : "retina4",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "retina47750x1334.png",
      "subtype" : "667h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhoneXr828x1792.png",
      "subtype" : "1792h",
      "scale" : "2x"
    },
    {
      "idiom" : "iphone",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "subtype" : "retina4",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "retina551242x2208.png",
      "subtype" : "736h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhoneX1125x2436.png",
      "subtype" : "2436h",
      "scale" : "3x"
    },
    {
      "idiom" : "iphone",
      "filename" : "iPhoneXSMax1242x2688.png",
      "subtype" : "2688h",
      "scale" : "3x"
    },
    {
      "idiom" : "ipad",
      "filename" : "ipad1024x768.png",
      "scale" : "1x"
    },
    {
      "idiom" : "ipad",
      "filename" : "ipad2048x1536.png",
      "scale" : "2x"
    }
  ],
  "info" : {
    "version" : 1,
    "author" : "xcode"
  }
}

And now in Xcode I see the following templates. I can define background image for the following devices Retina HD 4.7"(iPhone 6, iPhone 7, iPhone 8), Retina HD 5.5" (iPhone 6 Plus, iPhone 7 Plus, iPhone 8 Plus), iPhone Xr, iPhone X/iPhone Xs, iPhone Xs Max

could have been great if u would have shared your modified contents.json file — Suraj K Thomas, Oct 04 '20 at 19:27

score 2 · Answer 2 · answered Jan 26 '21 at 12:46

2

For this simply create imageset with Universal devices support.

Add single image with latest device dimensions I used 1242 × 2208. In xib/storyboard add imageview with content-Mode AspectFit and its working fine.

answered Jan 26 '21 at 12:46

Nidhi Tiwari

190
2
2
9

Serj Rubens · Answer 3 · 2019-02-07T12:21:03.933

@Igor had interesting answer :) even not so bad excluding one thing - then your project growing exponentially cuz of amount of images. instead you can have 3 images (or even 2 if you wanna support devices starting from 5 to XSMax). so image for 4S diagonal, then for 5, SE, 6, 7, 8 and for Xr, X, Xs, XsMax.

When you need to choose proper image you're using code below:

extension UIImage {
    static func imageWithName(_ name: String) -> UIImage? {
        var finalName = name
        switch UIDevice.current.screenType {
        case .short: finalName += "@short"
        case .normal: finalName += "@normal"
        case .tall: finalName += "@tall"
        case .unknown: finalName = ""
        }
        return UIImage(named: finalName)
    }
}

extension UIDevice {
    enum DeviceType: String {
        case iPhones_4_4S = "iPhone 4 or iPhone 4S"
        case iPhones_5_5s_5c_SE = "iPhone 5, iPhone 5s, iPhone 5c or iPhone SE"
        case iPhones_6_6s_7_8 = "iPhone 6, iPhone 6S, iPhone 7 or iPhone 8"
        case iPhones_6Plus_6sPlus_7Plus_8Plus = "iPhone 6 Plus, iPhone 6S Plus, iPhone 7 Plus or iPhone 8 Plus"
        case iPhones_X_XS = "iPhone X or iPhone XS"
        case iPhone_XR = "iPhone XR"
        case iPhone_XSMax = "iPhone XS Max"
        case unknown
    }
    var deviceType: DeviceType {
        switch UIScreen.main.nativeBounds.height {
        case 960: return .iPhones_4_4S
        case 1136: return .iPhones_5_5s_5c_SE
        case 1334: return .iPhones_6_6s_7_8
        case 1792: return .iPhone_XR
        case 1920, 2208: return .iPhones_6Plus_6sPlus_7Plus_8Plus
        case 2436: return .iPhones_X_XS
        case 2688: return .iPhone_XSMax
        default: return .unknown
        }
    }

    enum ScreenType {
        case short, normal, tall, unknown
    }
    var screenType: ScreenType {
        switch deviceType {
        case .iPhones_4_4S: return .short
        case .iPhones_5_5s_5c_SE: fallthrough
        case .iPhones_6_6s_7_8: fallthrough
        case .iPhones_6Plus_6sPlus_7Plus_8Plus: return .normal
        case .iPhone_XR: fallthrough
        case .iPhones_X_XS: fallthrough
        case .iPhone_XSMax: return .tall
        default: return .unknown
        }
    }
}

You should store your images in asset catalog like this - single scale, for universal devices and with "@short", "@normal", "@tall" suffixes

USAGE: bgImageView.image = UIImage.imageWithName("main_bg")

UPDATE: The other option is just to use normal way like @1x @2x @3x images but with content mode scale aspect fill:

bgImageView.contentMode = .scaleAspectFill

then your image will be perfectly filling a screen, and only you have to be ready that it will be cropped from a sides. If it's not ruining a view of your image then it's easiest and best solution.

P.S.: I know I'm not answering to a topic starter but to Igor's answer, BUT I got here searching for solution of managing images in asset catalog due to new sizes of screen released from Apple.

UPDATE 2: As far as I got main question in this topic and resolutions/scales explained here, I think for @3x good to use XSMax resolution and for @2x - Xr resolution, so then it will be cropped but looking good and sharp on all devices with contentMode = .scaleAspectFill as explained above. For exporting graphics I would do then like on picture below:

taking a width 1792w of Xr for @2x size and 2688w for @3x

Ali Ihsan URAL · Answer 4 · 2018-09-17T06:28:10.747

0

You can use bigger resolution for solving this problem

1X - 375x667 + Y

2X - (375*2)x(667*2) + 2Y

3X - (375*3)x(667*3) + 3Y

The Phone automatically set the image size.

edited Sep 17 '18 at 06:28

answered Sep 17 '18 at 05:40

Ali Ihsan URAL

1,894
1
20
43

As your comment, 3x height size will be 2001px. It will be a quality loss because iPhone Xs Max needs 2688 px height for the sharp view. Thanks for the reply. @Ali Ihsan URAL – mannyCalavera Sep 17 '18 at 06:08
Then you can use bigger image for resolution. This is not size problem , its resolution problem – Ali Ihsan URAL Sep 17 '18 at 06:12
I read this. And I say again. Its not size problem. You dont have to give these sizes to images . You can use 1000x1000 for 1X , 2000x2000 for 2X , 3000x3000 for 3X. Thus you dont have to think resolution. Just you use bigger resolution for each image. – Ali Ihsan URAL Sep 17 '18 at 06:26
Do we need to give a name for the problem? We don't. Size or Resolution, don't matter. Besides, I did not write, "this is a size problem" or "this is a resolution problem" I just wanted to show sharp images for the full page background. If we show 2001 px(height) in iPhone Xs Max. Quality will be not got good. Because this device needs 2688 px(height) to show the image sharp. That's why your reply can be wrong. I wrote this. And then you are saying me, 'Then you can use bigger image for resolution'. This is nonsense. Because I want people to focus this issue in my question already. – mannyCalavera Sep 17 '18 at 06:41
1

My question is simple: Is 1242x2688 px fine for @3x? Should reference be an iPhone Xs Max for the @3x size? That's it. Yes or No. If the reply is 'no' so what is the reference device/size for @3x? (iPhone) – mannyCalavera Sep 17 '18 at 06:43
There is no reference size. Its up to you. – Ali Ihsan URAL Sep 17 '18 at 06:45

Full page background image sizes after new Iphone models has been released (Xcode)

4 Answers4