I need to find out the proper sizes and the file names for all these launch images.
Latest Xcode versions doesn't show the expected sizes in the attributed inspector when you select those slots. And Apple's documentation on launch images isn't much use either.
HERE AN IMAGE THAT SHOWS THE SIZE'S CORRESPONDENCES :
https://i.stack.imgur.com/xszm9.png
And a text version for everyone that doesn’t like graphical solutions:
320 x 480 px
iPhone Portrait iOS 5,6 1x
640 x 960 px
iPhone Portrait iOS 7, 8 2x
iPhone Portrait iOS 5, 6 2x
640 x 1136 px
iPhone Portrait iOS 7, 8 Retina 4
iPhone Portrait iOS 5, 6 Retina 4
750 x 1334 px
iPhone Portrait iOS 8 Retina HD 4.7
1242 x 2208 px
iPhone Portrait iOS 8 Retina HD 5.5
2208 x 1242 px
iPhone Landscape iOS 8 Retina HD 5.5
768 x 1024 px
iPad Portrait iOS 7, 8 1x
iPad Portrait iOS 5, 6 1x
1536 x 2048 px
iPad Portrait iOS 7, 8 2x
iPad Portrait iOS 5, 6 2x
1024 x 768 px
iPad Landscape iOS 7, 8 1px
iPad Landscape iOS 5, 6 1px
2048 x 1536 px
iPad Landscape iOS 7, 8 2px
iPad Landscape iOS 5, 6 2px
768 x 1004 px
iPad Portrait Without Status Bar iOS 5, 6 1px
1536 x 2008 px
iPad Portrait Without Status Bar iOS 5, 6 2px
1024 x 748 px
iPad Landscape Without Status Bar iOS 5, 6 1px
2048 x 1496 px
iPad Landscape Without Status Bar iOS 5, 6 2px
I couldn't find anything in the documentation anymore, but I found this list here here
Anyway, I suggest you take a look at using a storyboard as launch screen, thereby you're independent of the screen sizes. There you can also include e.g. images.
I got the following numbers for iPhone devices, from PaintCodeApp website
Device Zoom display Points Rendered pixels Scale
W H W H
iPhone 6 Plus Off 414 736 1242 2208 #3x
iPhone 6 Plus On 375 667 1125 2001 #3x
iPhone 6 Off 375 667 750 1334 #2x
iPhone 6 On 320 568 640 1136 #2x
iPhone 5 - 320 568 640 1136 #2x
iPhone 4 - 320 480 640 960 #2x
iPhone 3GS - 320 480 320 480 #1x
Since my apps were designed for iPhone 3GS up to iPhone 5, the supported points frames are 320x480#1x, 320x480#2x and 320x568#2x.
I assume that on an iPhone 6 with the zoom mode enabled, the display should be the exact same as the iPhone 5, since the points frame is 320x568#2x as well. This might be wrong, since I cannot find no confirmation.
Now, what I'm really wondering is how my apps shows on iPhone 6 with the zoom mode off, and on iPhone 6 plus with or without the zoom mode, since the points frames are 375x667#2x, 375x667#3x and 414x736#3x.
Apple Developer Support couldn't give me no hint nor documentation to read on the subject. Since I haven't bought the new devices, is there anyone who knows what actually happens with old apps ?
For those like me who wonder how are treated legacy apps, I did a bit of testing and computation on the subject.
Thanks to #hannes-sverrisson hint, I started on the assumption that a legacy app is treated with a 320x568 view in iPhone 6 and iPhone 6 plus.
The test was made with a simple black background bg#2x.png with a white border. The background has a size of 640x1136 pixels, it is black with an inner white border of 1px.
Below are the screenshots provided by the simulator :
iPhone 5 simulator : http://i.stack.imgur.com/b2E5K.png
iPhone 6 simulator : http://i.stack.imgur.com/4Qz8N.png
iPhone 6 plus simulator : http://i.stack.imgur.com/hQisc.png
What we can see on the iPhone 6 screenshot is a 1px margin on top and bottom of the white border, and a 2px margin on the iPhone 6 plus screenshot. This gives us a used space of 1242x2204 on iPhone 6 plus, instead of 1242x2208, and 750x1332 on the iPhone 6, instead of 750x1334.
We can assume that those dead pixels are meant to respect the iPhone 5 aspect ratio :
iPhone 5 640 / 1136 = 0.5634
iPhone 6 (used) 750 / 1332 = 0.5631
iPhone 6 (real) 750 / 1334 = 0.5622
iPhone 6 plus (used) 1242 / 2204 = 0.5635
iPhone 6 plus (real) 1242 / 2208 = 0.5625
Second, it is important to know that #2x resources will be scaled not only on iPhone 6 plus (which expects #3x assets), but also on iPhone 6. This is probably because not scaling the resources would have led to unexpected layouts, due to the enlargment of the view.
However, that scaling is not equivalent in width and height. I tried it with a 264x264 #2x resource. Given the results, I have to assume that the scaling is directly proportionnal to the pixels / points ratio.
Device Width scale Computed width Screenshot width
iPhone 5 640 / 640 = 1.0 264 px
iPhone 6 750 / 640 = 1.171875 309.375 309 px
iPhone 6 plus 1242 / 640 = 1.940625 512.325 512 px
Device Height scale Computed height Screenshot height
iPhone 5 1136 / 1136 = 1.0 264 px
iPhone 6 1332 / 1136 = 1.172535 309.549 310 px
iPhone 6 plus 2204 / 1136 = 1.940141 512.197 512 px
It's important to note the iPhone 6 scaling is not the same in width and height (309x310). This tends to confirm the above theory that scaling is not proportional in width and height, but uses the pixels / points ratio.
I hope this helps.
Apple's website claims that the resolution is 1080p: 1920 x 1080
However, the launch screen required by Xcode (8.0 GM launched today) is 2208 x 1242.
Who's right?
The iPhone 6+ renders internally using #3x assets at a virtual resolution of 2208×1242 (with 736x414 points), then samples that down for display. The same as using a scaled resolution on a Retina MacBook — it lets them hit an integral multiple for pixel assets while still having e.g. 12 pt text look the same size on the screen.
So, yes, the launch screens need to be that size.
The maths:
The 6, the 5s, the 5, the 4s and the 4 are all 326 pixels per inch, and use #2x assets to stick to the approximately 160 points per inch of all previous devices.
The 6+ is 401 pixels per inch. So it'd hypothetically need roughly #2.46x assets. Instead Apple uses #3x assets and scales the complete output down to about 84% of its natural size.
In practice Apple has decided to go with more like 87%, turning the 1080 into 1242. No doubt that was to find something as close as possible to 84% that still produced integral sizes in both directions — 1242/1080 = 2208/1920 exactly, whereas if you'd turned the 1080 into, say, 1286, you'd somehow need to render 2286.22 pixels vertically to scale well.
The answer is that older apps run in 2208 x 1242 Zoomed Mode. But when an app is built for the new phones the resolutions available are: Super Retina HD 5.8 (iPhone X) 1125 x 2436 (458ppi), Retina HD 5.5 (iPhone 6, 7, 8 Plus) 1242 x 2208 and Retina HD 4.7 (iPhone 6) 750 x 1334. This is causing the confusion mentioned in the question. To build apps that use the full screen size of the new phones add LaunchImages in the sizes: 1125 x 2436, 1242 x 2208, 2208 x 1242 and 750 x 1334.
Updated for the new iPhones 12, 12 mini, 12 Pro, 12 Pro Max
Size for iPhone 12 Pro Max with #3x scaling, coordinate space: 428 x 926 points and 1284 x 2778 pixels, 458 ppi, device physical size is 3.07 x 6.33 in or 78.1 x 160.8 mm. 6.7" Super Retina XDR display.
Size for iPhone 12 Pro with #3x scaling, coordinate space: 390 x 844 points and 1170 x 2532 pixels, 460 ppi, device physical size is 2.82 x 5.78 in or 71.5 x 146.7 mm. 6.1" Super Retina XDR display.
Size for iPhone 12 with #2x scaling, coordinate space: 585 x 1266 points and 1170 x 2532 pixels, 460 ppi, device physical size is 2.82 x 5.78 in or 71.5 x 146.7 mm. 6.1" Super Retina XDR display.
Size for iPhone 12 mini with #2x scaling, coordinate space: 540 x 1170 points and 1080 x 2340 pixels, 476 ppi, device physical size is 2.53 x 5.18 in or 64.2 x 131.5 mm. 5.4" Super Retina XDR display.
Size for iPhone 11 Pro Max with #3x scaling, coordinate space: 414 x 896 points and 1242 x 2688 pixels, 458 ppi, device physical size is 3.06 x 6.22 in or 77.8 x 158.0 mm. 6.5" Super Retina XDR display.
Size for iPhone 11 Pro with #3x scaling, coordinate space: 375 x 812 points and 1125 x 2436 pixels, 458 ppi, device physical size is 2.81 x 5.67 in or 71.4 x 144.0 mm. 5.8" Super Retina XDR display.
Size for iPhone 11 with #2x scaling, coordinate space: 414 x 896 points and 828 x 1792 pixels, 326 ppi, device physical size is 2.98 x 5.94 in or 75.7 x 150.9 mm. 6.1" Liquid Retina HD display.
Size for iPhone X🅂 Max with #3x scaling (Apple name: Super Retina HD 6.5 display"), coordinate space: 414 x 896 points and 1242 x 2688 pixels, 458 ppi, device physical size is 3.05 x 6.20 in or 77.4 x 157.5 mm.
let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 Max Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 1242.0, 2688.0), scale: 3.0
Size for iPhone X🅁 with #2x scaling (Apple name: Super Retina HD 6.1" display), coordinate space: 414 x 896 points and 828 x 1792 pixels, 326 ppi, device physical size is 2.98 x 5.94 in or 75.7 x 150.9 mm.
let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅁 Screen bounds: (0.0, 0.0, 414.0, 896.0), Screen resolution: (0.0, 0.0, 828.0, 1792.0), scale: 2.0
Size for iPhone X🅂 and iPhone X with #3x scaling (Apple name: Super Retina HD 5.8" display), coordinate space: 375 x 812 points and 1125 x 2436 pixels, 458 ppi, device physical size is 2.79 x 5.65 in or 70.9 x 143.6 mm.
let screen = UIScreen.main
print("Screen bounds: \(screen.bounds), Screen resolution: \(screen.nativeBounds), scale: \(screen.scale)")
//iPhone X🅂 and X Screen bounds: (0.0, 0.0, 375.0, 812.0), Screen resolution: (0.0, 0.0, 1125.0, 2436.0), scale: 3.0
Size for iPhone 6, 6S, 7 and 8 with #3x scaling (Apple name: Retina HD 5.5), coordinate space: 414 x 736 points and 1242 x 2208 pixels, 401 ppi, screen physical size is 2.7 x 4.8 in or 68 x 122 mm. When running in Zoomed Mode, i.e. without the new LaunchImages or choosen in Setup on iPhone 6 Plus, the native scale is 2.88 and the screen is 320 x 568 points, which is the iPhone 5 native size:
Screen bounds: {{0, 0}, {414, 736}}, Screen resolution: <UIScreen: 0x7f97fad330b0; bounds = {{0, 0}, {414, 736}};
mode = <UIScreenMode: 0x7f97fae1ce00; size = 1242.000000 x 2208.000000>>, scale: 3.000000, nativeScale: 3.000000
Size for iPhone 6 and iPhone 6S with #2x scaling (Apple name: Retina HD 4.7), coordinate space: 375 x 667 points and 750 x 1334 pixels, 326 ppi, screen physical size is 2.3 x 4.1 in or 58 x 104 mm. When running in Zoomed Mode, i.e. without the new LaunchImages, the screen is 320 x 568 points, which is the iPhone 5 native size:
Screen bounds: {{0, 0}, {375, 667}}, Screen resolution: <UIScreen: 0x7fa01b5182d0; bounds = {{0, 0}, {375, 667}};
mode = <UIScreenMode: 0x7fa01b711760; size = 750.000000 x 1334.000000>>, scale: 2.000000, nativeScale: 2.000000
And iPhone 5 for comparison is 640 x 1136, iPhone 4 640 x 960.
Here is the code I used to check this out (note that nativeScale only runs on iOS 8):
UIScreen *mainScreen = [UIScreen mainScreen];
NSLog(#"Screen bounds: %#, Screen resolution: %#, scale: %f, nativeScale: %f",
NSStringFromCGRect(mainScreen.bounds), mainScreen.coordinateSpace, mainScreen.scale, mainScreen.nativeScale);
Note: Upload LaunchImages otherwise the app will run in Zoomed Mode and not show the correct scaling, or screen sizes. In Zoomed Mode the nativeScale and scale will not be the same. On an actual device the scale can be 2.608 on the iPhone 6 Plus, even when it is not running in Zoomed Mode, but it will show scale of 3.0 when running on the simulator.
Real/physical iPhone 6 Plus resolution is 1920x1080 but in Xcode you make your interface for 2208x1242 resolution (736x414 points) and on device it is automatically scaled down to 1920x1080 pixels.
iPhone resolutions quick reference:
Device Points Log. Res. Sc. Real Res. PPI Ratio Size
iPhone 12 Pro Max, 13 Pro Max 926x428 2778x1284 3x 2778x1284 458 19.5:9 6.7"
iPhone 12, 12 Pro, 13, 13 Pro 844x390 2532x1170 3x 2532x1170 460 19.5:9 6.1"
iPhone 12 mini, 13 mini 812x375 2436x1125 3x 2340x1080 476 19.5:9 5.4"
iPhone XS Max, 11 Pro Max 896x414 2688x1242 3x 2688x1242 458 19.5:9 6.5"
iPhone XR, 11 896x414 1792x828 2x 1792x828 326 19.5:9 6.1"
iPhone X, XS, 11 Pro 812x375 2436x1125 3x 2436x1125 458 19.5:9 5.8"
iPhone 6+, 6S+, 7+, 8+ 736x414 2208x1242 3x 1920x1080 401 16:9 5.5"
iPhone 6, 6S, 7, 8, SE2 667x375 1334x750 2x 1334x750 326 16:9 4.7"
iPhone 5, 5S, 5C, SE1 568x320 1136x640 2x 1136x640 326 16:9 4.0"
iPhone 4, 4S 480x320 960x640 2x 960x640 326 3:2 3.5"
iPhone 3GS 480x320 480x320 1x 480x320 163 3:2 3.5"
You should probably stop using launch images in iOS 8 and use a storyboard or nib/xib.
In Xcode 6, open the File menu and choose New ⟶ File... ⟶ iOS ⟶ User Interface ⟶ Launch Screen.
Then open the settings for your project by clicking on it.
In the General tab, in the section called App Icons and Launch Images, set the Launch Screen File to the files you just created (this will set UILaunchStoryboardName in info.plist).
Note that for the time being the simulator will only show a black screen, so you need to test on a real device.
Adding a Launch Screen xib file to your project:
Configuring your project to use the Launch Screen xib file instead of the Asset Catalog:
On the physical device, iPhone 6 Plus's main screen's bounds is 2208x1242 and nativeBounds is 1920x1080. There is hardware scaling involved to resize to the physical display.
On the simulator, the iPhone 6 Plus's main screen's bounds and nativeBounds are both 2208x1242.
In other words... Videos, OpenGL, and other things based on CALayers that deal with pixels will deal with the real 1920x1080 frame buffer on device (or 2208x1242 on sim). Things dealing with points in UIKit will be deal with the 2208x1242 (x3) bounds and get scaled as appropriate on device.
The simulator does not have access to the same hardware that is doing the scaling on device and there's not really much of a benefit to simulating it in software as they'd produce different results than the hardware. Thus it makes sense to set the nativeBounds of a simulated device's main screen to the bounds of the physical device's main screen.
iOS 8 added API to UIScreen (nativeScale and nativeBounds) to let a developer determine the resolution of the CADisplay corresponding to the UIScreen.
For those like me who wonder how legacy apps are treated, I did a bit of testing and computation on the subject.
Thanks to #hannes-sverrisson hint, I started on the assumption that a legacy app is treated with a 320x568 view in iPhone 6 and iPhone 6 plus.
The test was made with a simple black background bg#2x.png with a white border. The background has a size of 640x1136 pixels, and it is black with an inner white border of 1 pixel.
Below are the screenshots provided by the simulator:
iPhone 5 simulator : http://i.stack.imgur.com/b2E5K.png
iPhone 6 simulator : http://i.stack.imgur.com/4Qz8N.png
iPhone 6 plus simulator : http://i.stack.imgur.com/hQisc.png
On the iPhone 6 screenshot, we can see a 1 pixel margin on top and bottom of the white border, and a 2 pixel margin on the iPhone 6 plus screenshot. This gives us a used space of 1242x2204 on iPhone 6 plus, instead of 1242x2208, and 750x1332 on the iPhone 6, instead of 750x1334.
We can assume that those dead pixels are meant to respect the iPhone 5 aspect ratio:
iPhone 5 640 / 1136 = 0.5634
iPhone 6 (used) 750 / 1332 = 0.5631
iPhone 6 (real) 750 / 1334 = 0.5622
iPhone 6 plus (used) 1242 / 2204 = 0.5635
iPhone 6 plus (real) 1242 / 2208 = 0.5625
Second, it is important to know that #2x resources will be scaled not only on iPhone 6 plus (which expects #3x assets), but also on iPhone 6. This is probably because not scaling the resources would have led to unexpected layouts, due to the enlargement of the view.
However, that scaling is not equivalent in width and height. I tried it with a 264x264 #2x resource. Given the results, I have to assume that the scaling is directly proportional to the pixels / points ratio.
Device Width scale Computed width Screenshot width
iPhone 5 640 / 640 = 1.0 264 px
iPhone 6 750 / 640 = 1.171875 309.375 309 px
iPhone 6 plus 1242 / 640 = 1.940625 512.325 512 px
Device Height scale Computed height Screenshot height
iPhone 5 1136 / 1136 = 1.0 264 px
iPhone 6 1332 / 1136 = 1.172535 309.549 310 px
iPhone 6 plus 2204 / 1136 = 1.940141 512.197 512 px
It's important to note the iPhone 6 scaling is not the same in width and height (309x310). This tends to confirm the above theory that scaling is not proportional in width and height, but uses the pixels / points ratio.
I hope this helps.
Check out this infographic: http://www.paintcodeapp.com/news/iphone-6-screens-demystified
It explains the differences between old iPhones, iPhone 6 and iPhone 6 Plus. You can see comparison of screen sizes in points, rendered pixels and physical pixels. You will also find answer to your question there:
iPhone 6 Plus - with Retina display HD. Scaling factor is 3 and the image is afterwards downscaled from rendered 2208 × 1242 pixels to 1920 × 1080 pixels.
The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.
Update:
There is an updated version of infographic mentioned above. It contains more detailed info about screen resolution differences and it covers all iPhone models so far, including 4 inch devices.
http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions
Even if I don't generally like the tone of John Gruber's Daring Fireball blog, his Larger iPhone Display Conjecture is well worth the read.
He guessed but got exactly right both the resolution in points and in pixels for both models, except that he did not (me neither) expect Apple to build a smaller resolution physical display and scale down (details are in #Tommy's answer).
The gist of it all is that one should stop thinking in terms of pixels and start thinking in terms of points (this has been the case for quite some time, it's not a recent invention) and resulting physical size of UI elements. In short, both new iPhone models improve in this regard as physically most elements remain the same size, you can just fit more of them on the screen (for each bigger screen you can fit more).
I'm just slightly disappointed they haven't kept mapping of internal resolution to actual screen resolution 1:1 for the bigger model.
I'm about to create the launch images for an universal iOS app, and reviewing the launch images related sections in both iOS Human Interface Guidelines and iOS App Programming Guide, I've found that the sizes of launch images for iPad are different in each document: the former says that a portrait launch image should be 768x1024 (std resolution), and the latter that it should be 768x1004 (std resolution). I guess that 20-pixel difference is due to considering or not the status bar. What size should I consider? Should I include the status bar?
Thanks
EDIT: It seems that the 768x1004 size is for iOS 6.1 and below, and 768x1024 for iOS 7 and above. So, does that mean that the launch image for iOS 6.1 and prior should not include the status bar?
I just checked in Xcode:
Portrait Non-Retina 768x1024
Portrait Retina 1536x2048
Portrait Non-Retina 768x1024
Portrait Retina 1536x2048
Landscape Non-Retina 1024x768
Landscape Retina 2048x1536
min dpi 72
For iPad portrait:
Retina: 1536 x 2048 pixels
Non-Retina: 768 x 1024 pixels (standard resolution)
For iPad landscape:
Retina: 2048 x 1536 pixels
Non-Retina: 1024 x 768 pixels (standard resolution)
To know for all devices follow this(Apple Document) link
768 x 1004 pixel with minimum 72 dpi is valid size of iPad Portrait mode because if you trying to add 768 x 1024 pixel image that XCode Shows warning to you.
i used following size for iPad:
iPad Portrait mode : 768 x 1004 pixel with minimum 72 dpi
iPad Retina Portrait mode : 1536 x 2008 pixel with minimum 72 dpi