Preparing for the new iPhone 6 and iPhone 6 Plus screen sizes

Unless you've been living under a rock, you'll be aware that Apple announced two new iPhone models yesterday, as well as a nice piece of jewellery.

For iOS app developers and designers, one of the most significant changes is to the screen sizes of the new iPhones, which differ significantly from what came before.

The first iPhones, up to the 3GS, had a 320×480 screen. When the iPhone 4 was launched, it came with a Retina display, doubling the number of physical pixels in the horizontal and vertical directions, while keeping the screen and UI elements the same size. Developers rushed to add @2x assets to their apps for the 320×480@2x screen.

4-4s

The iPhone 5 was the first iPhone which changed the aspect ratio, and increased the usable screen area to 320×568@2x. Since only the height changed, it was relatively easy for developers to add additional height to certain elements, and fit the new screen.

5

 

Now we have two new screen sizes to contend with. The iPhone 6 is an effective 375×667@2x, both wider and taller than the iPhone 5 family.

6

The iPhone 6 Plus's screen is a weird beast. Assets will need to be provided @3x for a 414×736@3x screen, meaning for example a full screen image would be 1242× 2208. However the physical iPhone 6 Plus's display panel is only 1080× 1920, therefore software downsampling will be used to scale down the assets to the physical display panel.

6plus

Note the aspect ratio of the two new screen sizes is identical to the iPhone 5/5C/5S. iOS8 will take advantage of this, running apps which have not yet been updated to be optimized for iPhone 6 in a special scaled mode, avoiding the black "letterbox" we saw with the iPhone 4 to 5 transition.

Here's a handy reference to summarize the new screen sizes side-by-side:

iPhone Screen Sizes.001

What does this mean for developers and designers:

  • 1. If you don't update your apps immediately, you can benefit from the auto-scaling to get a reasonable temporary solution for the two new devices
  • 2. When you update your app to properly support the new resolution, you'll need to deal with more available width and height
  • 3. Designs will need to be more flexible, using features like the new Adaptive Layout introduced by Apple. Instead of being at fixed pixel positions and sizes, buttons and UI elements will have to stretch and scale to fit various screen sizes - not unlike designing an Android app!
  • 4. Icons and UI elements will need to be provided in @1x, @2x and @3x versions
  • 5. It's unclear how some elements will render on the iPhone 6 Plus, for example 1px hairline lines may become antialiased due to the software downsampling.
  • 6. Additionally, Apple showed off the iPhone 6 Plus running in landscape mode, which used a two-pane UI similar to the iPad. The iPhone 6 Plus even has a landscape version of the home screen, so we can expect more pressure to get your apps working in landscape mode.
Matt Mayer

Matt Mayer is a founder at ReignDesign. Matt is from the UK and was based in Shanghai for ten years. He is now living in Bangkok, Thailand.

32 comments

    1. It doesn’t directly map to a DPI. For example the iPhone 6, iPhone 5, iPad mini 2, iPad 3 all use “2x” resolution but would render an image an slightly different sizes.

  1. There’s something I don’t completly understand. In your images, you just use @2x and @3x. Is this meaning I just have to create 2 different scales, one with 750×1334 for @2x and one with 1242×1208 for @3x or do I have to create three different images for each @2x scale I need?

  2. Hi, Still i am not able to understand, where I should start my design. Whether the PSD I create, should be 1080X1920 or 1242X2208? I have downloaded an iPhone 6 Plus Stencils from the internet, where they have designed the layouts in 1080X1920. But in some of the sites, they are saying that we should design it on 1242X2208 and one more thing, if i am designing it in 1242X2208, should i take that as my 3x assets or i should convert that it in to 1080X1920 dimension and then i should give assets. I am completely confused. Please help me in this.

    1. Design at 1242X2208 and that gives you your 3x assets. The phone converts it to 1080X1920, you shouldn’t do that in your designs.

      1. take the following canvas ratio

        1x 72ppi- 320/480
        2x 144ppi- 750/1334
        3x 216ppi- 1242X2208

        assets size – example
        1x – 25
        2x 50
        3x 75
        which mean 1x size multiple by 2 and 3

        Better way to create all design icons in illustrator which can easily scale. and start with 6+ size

  3. What is the formula to convert to convert 3x image into 2x e.g i have a logo which has dimensions of 720*900 in 3x.What will be its dimension in 2x??

  4. HEY . I NEED SOME HELP.I’M REAL BIG INTO SHOOTING ALL MY PHOTO’S IN THE HIGHEST RESOLUTION I CAN.NOW WHEN I PLAY THEM BACK IN WINDOWS PHOTO GALLERY,I CAN HIT THE FULL SCREEN MODE……I AM TRING TO FIND AN APP THAT WILL TAKE ALL PHOTO’S ON IPHONE 6 PLUS AND SHOW IT IN FULL SCREEN MODE,THE EASIEST WAY POSSIBLE.
    THX OLE COOL HIPPIE,16K PHOTOS FROM ALL OVER THE WORLD,,AND I WANT TO SEE FULL SCREEN,,,CAN YA GIVE A GUY SOME HELP ON THE CORRECT APP. johnasinnigen@gmail.com,THX-OH I TYPE IN CAPS DUE TO CARPEL TUNNEL, SORRY.

  5. This is the solution I saw in two places… but I have a question on them you can see my remarks.

    (320 x 568) for iPhone 5 & 5s
    [At export time you have to render this at 144 PPI, or @2x]
    This I understand for smaller the iPhone 3 and iPhone 5.

    (375 x 667) for iPhone 6 – 4.7″
    [At export time you have to render this at 144 PPI, or @2x]
    This seems unnecessary 375pts = 750px so it seems a matter of choice. You only need one. For the iPhone 3 it needs smaller assets. iPhone 6 is one size 750px so designing at 375 and exporting 2x is redundant no?

    (414 x 736) for iPhone 6 Plus – [At export time you have to render this at 216 PPI, or @3x] Same on this as iPhone 6.

  6. Hi,
    a qucik question regarding the upscaling from iPhone5 to iPhone 6/6+:

    All comments on this topic evolve around exporting assets – which is fine. My problem is that when you have a layout done for the iPhone 5 (640 x 1136) and you want to show how this will look on a iPhone 6+ – it doesn’t seem like Photoshop keeps the same aspect ratio (16:9).

    When upscaling from 640 x 1136 to 1242 (width) it says the height should be 2205 (when changing “Image Size” and typing in 1242 for the width)

    … kinda makes my life difficult, when the full layout comps can’t be scaled correctly and proportionally.

  7. First of all great thanks for sharing the great post. I have some confusion. Please guide which gives me more clarity. For example, I have an UIImageView. The image size, which it contains, is 750 * 480 (@2x resolution). What should be the image size for iPhone 4/4s, iPhone 5/5s/5c and iPhone 6+? I know that 4/4s and 5/5s/5c support Retina display and 6 + supports Retina HD, which requires @3x resolution image. I confuse because when I set contentMode property of view as UIViewContentModeScaleAspectFit it creates ambiguity.

    Thanks in advance,
    Paril Shah

  8. In my iPhone application i have an background image for the entire view, when i’m giving the background image sizes as below for device specific as iPhone & iPhone – 4 inch

    bg-736h@3x.png ==> 1242 × 2208 pixels
    bg-568h@2x.png ==> 640 × 1136 pixels
    bg@2x.png==> 640 × 960 pixels

    For the iPhone 6 it is not working perfectly, can you please help me out

  9. Thanks for this wonderful post. But I m still confused in the images to be used in image.xcassests. When you want to provide the image for background view and support all screen then in image.xcassests you get the four options @1x, @2x, Ratina 4 @2x and @3x. But I am confused in the sizex to be used for this background image. Should it be:
    320×48 @1x
    640×960 @2x
    640×1136 Ratina 4 @2x
    ?x? @3x?

    Please help me out in this.

  10. Designing at the 640×1136 I would use a 20px grid. Are you guys designing @2x for iPhone 6 with grid of 10 or still designing at 640×1136

  11. Now you can deliver assets as SVG images with extension PDF. Content size of this image should be none retina size. In this case Xcode automatically will be generating rest of images.

  12. take the following canvas ratio

    1x 72ppi- 320/480
    2x 144ppi- 750/1334
    3x 216ppi- 1242/2208

    assets size – example
    1x – 25
    2x- 50
    3x- 75
    which mean 1x size multiple by 2 and 3

    Better way to create all design icons in illustrator which can easily scale. and start with 6+ size

  13. There’s something I don’t completly understand. In your images, you just use @2x and @3x. Is this meaning I just have to create 2 different scales, one with 750×1334 for @2x and one with 1242×1208 for @3x Or 640×960 for @2x .If i take 750×1334 @2x for Retina Display Devices then images in this resolution only fit for iphone 6 not iphone 4 and 5.for iphone 4s and 5 which scales i need to use.

  14. Hi Matt
    If I design at 1x that is 320×480 then I can export assets at 2x for 640×1136. But for 3x it will have a difference since that’s 960 width.Now if I make a second file at 375 which is 1x then output to 2x which is 750px.But for 3x doesn’t matter will be the same since 3x of 375 is the 1125 is zoom display.So I make a 3rd file at 1242×2208. So I need to make 3 separate files then right? so kindly tell me what will be the proper workflow.

Leave a Reply

Your email address will not be published. Required fields are marked *