What's Global Moxie?

Global Moxie specializes in mobile design strategy and user experience for a multiscreen world. We offer consulting services, training, and product-invention workshops to help creative organizations build tapworthy mobile apps and effective websites. We're based in Brooklyn, NY. Learn more.

Designing for iPhone 4's Retina Display

Posted Jun 30, 2010

So, um, maybe you heard: there’s a new iPhone out. For my money (and I shelled out plenty for it), the phone’s best feature is the new “Retina display,” the eye-popping high-resolution screen. Everything they say about it is true: at 320 ppi, the pixels are just plain invisible. The crisp bright screen really looks as good as print, absolutely gorgeous.

But what soothes the eye also adds headaches for designers. For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels. Suddenly, we’re all designing for two different screens. Fold in the iPad, and you’ve got three iOS screens to juggle. (Hey, it’s better than designing for Android phones, which will have around 60 different devices and form factors by year end, but still... device fragmentation has arrived in its own small way in iOS land.)

Apple’s done some nice work under the hood in iOS 4 to make this transition as easy as possible, but designers still have to take on some extra legwork. Here’s the gist.

iPhone 4 vs iPhone 3GS display

I’ll Give You Two Pixels for That Point

Starting in iOS 4, dimensions are measured in “points” instead of pixels. Conveniently enough, the iPhone screen is 320x480 points on both iPhone 4 and older models. Since that matches the pixel dimensions on older phones, existing apps look and work the same on those phones in iOS 4 as they did in earlier operating systems. There, one pixel is one point, a one-to-one match.

In other words, dimensions for all the various elements of iOS 4 remain the same, but their units have changed: you just substitute points where you used to say pixels. (Ah, the travails of the hard-working tech writer; the new phone was unveiled just two weeks after my new book Tapworthy went to press. Though the 640x960 screen was already a foregone conclusion, it wasn’t yet clear how iOS would handle the new resolution, so I had to treat the matter with benign neglect. Alas, Tapworthy refers to all of its dimensions in pixels. If you have the book, just squint a little and pretend it says “points” instead.)

On iPhone 4, a point is two pixels; draw a one-point line, and it shows up two pixels wide. So: just specify your measurements in points for all devices, and iOS automatically draws everything to the right proportion on the screen. Text and images remain the same physical size on both old and new phones. That goes for bitmap images in legacy apps, too; iOS 4 blows ‘em up, automatically pixel-doubling them to adapt to the new phone’s resolution.

Of course, pixel-doubled images don’t take advantage of the gloriously crisp display on the new phone. That’s where your extra legwork comes in: to add high-resolution images to your app, you have to include a second set of all your graphic files. For every image in your app, add a second version that’s twice the size, adding @2x to the name. For a low-resolution image named image.png, for example, you would add a second file named image@2x.png. The new image will be picked up automatically by iPhone 4. Everywhere your code requests image.png (or even just plain old image), image@2x.png will be used instead.

Really? Yep, Really

I know what you’re thinking: “Do I really have to make two versions of my images? If I make a single high-resolution set, won’t iOS 4 scale them down on older devices?” Sorry, no, not automatically. While iOS 4 goes seamlessly in the other direction (scaling up low-res images for iPhone 4), it doesn’t work the other way. By default, it scales all images so that one pixel equals one point. That’s a great solution for making sure that old apps work correctly on the new phone, but it doesn’t help you go the other way ‘round.

While you could add additional code to downsize each and every high-res image for older devices, that would a) be a hassle, b) reduce performance, and c) create resized images that don’t look as good as the original. It might be extra work to create two sets of images for both old and new devices, but that’s the right way to go.

In practice, that means Photoshop fans should learn to get comfortable with Illustrator or [insert preferred vector application]. By building your app graphics in vector format, you can export them in whatever size you like with limited muss or fuss. This almost certainly won’t be the last time we see a new iPhone screen resolution emerge, and you can be ready for the next time by prepping all your graphics in vector formats. (Some folks, including Sebastiaan de With and Rusty Mitchell saw this coming a long time ago.)

There’s one exception to that: the app icon. Because of the wide variety of sizes and contexts in which your app icon appears, a pixel-perfect bitmap approach makes good sense. That’s particularly true for the tiniest versions, where the fabulous vector detail of your large icon will just scale down to mush. More on icon Photoshoppery in a sec. First, let’s get acquainted with the growing family of app icons that iOS requires for the various devices.

Boy Howdy, That’s a Lot of Icons

It used to be simple. You used to need just three icon sizes: a big 512px icon for the App Store, a 57px icon for the home screen, and a 29px icon for search results. Now, if you’re building a universal app for iPhone, iPhone 4, and iPad, you’ve gotta create 11 — eleven! — separate icons. And can you believe it: the mix even includes both 57x57 and 58x58 versions. Oh, the humanity. Here’s the rundown:

App Store Icon

  • 512x512 (scaled down to 175x175 for display in the store)

Application Icon

  • 114x114 (iPhone 4)
  • 57x57 (older iPhones)
  • 72x72 (iPad)

Spotlight Search Results and Settings Icon

  • 58x58 (iPhone 4)
  • 50x50 (Spotlight results for iPad)
  • 29x29 (settings for iPad and older iPhones)

Document Icon

This is a new icon type in iOS 4. It’s used if your app creates a custom document type. The iPad uses the document icon in two different sizes.

  • 320x320 (iPad)
  • 64x64 (iPad)
  • 44x58 (iPhone 4)
  • 22x29 (older iPhones)

Neven Mrgan to the Rescue

Neven Mrgan's Photoshop template

And finally, the promised icon Photoshoppery. The inimitable Neven Mrgan put together a handy Photoshop template to help make quick work of this app-icon assembly line. Highly recommended.

Meanwhile, Back on the Web

If you're designing mobile websites or web apps, you likewise need to do a tiny bit more work to show off your high-resolution prowess on iPhone 4. WaltPad has all the details on how to use CSS3 media queries to give iPhone 4 (and other high-res devices) their own special style sheets. Good stuff.

Tags: , , , , , ,


73 comment(s) on this page. Add your own comment below.

Jul 8, 2010 1:05am [ 1 ]

Astoudingly awesome post, thank you so much!

Jul 8, 2010 3:37am [ 2 ]

Brilliant write up, I'll be reffering back to this!

Jul 8, 2010 9:48pm [ 3 ]

People talk without full knowledge. Ok, I agree developers have to update their apps for iPhone 4 but for your information, not all developers are americans and for those living outside the USA, in countries that Apple are not selling not even the iPad yet, it is a little bit difficult to get in pace.

If Apple at least gave importance for foreigner developers, things would be easier.

Jul 9, 2010 1:34am [ 4 ]

In case it helps, we put up a little web app to simplify the icon resizing for developers. Upload your 512x512 icon and it will generate the rest:

Jul 11, 2010 7:25am [ 5 ]

@SC thanks for the link, it's really handy!

Paul McDougall
Jul 16, 2010 6:53pm [ 6 ]

Thank you so much! I've been looking for a clear explanation of this for days! :)

Jul 23, 2010 7:33pm [ 7 ]

Thanks for putting all this info in the one place. Very handy - especially the icon section.

Jul 26, 2010 6:41am [ 8 ]

I realize a new iPhone application, a web app. I developed it with web languages and I will switch to a native application. I know how to use the high resolution of the iphone 4 on a web app? :) Because the trick @ x2 does not, of course. I think if I pass in native and I save my images in 2 yours it will work (whatever), but some of my sites are not intended to become native app and would like to receive as a quick release a day "full compliant display retina." In the meantime, thank you in advance for those who bring me some answers! Have a nice day:)

PS: I'M FRENCH - - 'I hope you understand

Jul 26, 2010 10:48am [ 9 ]

Is there some reason why the @2x would not work? I've been running a test at and the larger image is not picked up on the iPhone 4 for me.

Jul 26, 2010 11:00am [ 10 ]

@Sooners and @Lee: The @2x extension is only for native apps, not for web apps or websites. To use high-resolution images in websites for iPhone 4, you have to gin up some special CSS. You can target iPhone 4 using a CSS3 media query, putting your high-resolution images into a separate style sheet.

Walt Dickinson's article Targeting the iPhone 4 Retina Display with CSS3 Media Queries provides details on this approach, as does Aral Balkan's article How to make your web content look stunning on the iPhone 4’s new Retina display.

Hope that helps! Josh

Jul 27, 2010 7:45am [ 11 ]

Josh, thanks a bunch. Here is what I did to solve the problem... works well. (although I wish Apple had supported this in webkit as well) CSS:

frog { background-image: url(froggy.png);}

@media only screen and -webkit-min-device-pixel-ratio: 2) { #frog {background-image: url('froggy@2x.png');} }

Aug 5, 2010 2:23am [ 12 ]

Sometimes adding your own photos to the wallpaper sounds to be a good idea. Here is a nice tool can help you to make wallpaper on iPhone 4 for free. It is very easy and will bring you splendid idea to reality and show your photos!

Sep 7, 2010 3:53pm [ 13 ]

Hey! Thanks so much for this!

So when opening a photoshop doc to begin drawing for iPhone 4:

  1. Do I set to points?

  2. Do I set my resolution to 300? (I tried this and it seemed to provide 4 times the original size, where I'm thinking I should only be designing at twice the size?)

Sep 7, 2010 3:59pm [ 14 ]

@Brian - The resolution of the image doesn't matter (iOS ignores the resolution); only the actual pixel size matters. I recommend that you measure your images in pixels in Photoshop, and create two versions of each one. So, if you have a 20-pixel image for older iPhones and iPod touches, you would also make a 40-pixel version for iPhone touch. That 40-pixel version should get @2x in its name (so you have a low-res file named image.png and a high-res file named image@2x.png).

Points only come into play in the Objective-C code for your native app. When specifying units in your code, think points instead of pixels. But when you're creating the actual graphics, just work with pixels.

Hope that helps!

Sep 9, 2010 4:58am [ 15 ]

Does we have to follow some standard naming conventions for application icon file. How device recognizes the image present in the app. Need some clarification

Sep 9, 2010 6:33pm [ 16 ]


Fantastic Josh! I am sure you are very busy, thank you for the extra touch to answer my question. When the app launches, I will let you know!


Sep 13, 2010 5:39pm [ 17 ]

Excellent and informative article Josh. Getting an iPhone next week, so looking forward to trying all this info out.

Sep 16, 2010 12:32pm [ 18 ]

Happy to help, folks, glad you find all of this useful!

@Mandar, you specify the names of your application files in your app's Info.plist file. See this page of the iPhone Application Programming Guide for details.

Hope that helps!

Dallas Mignano
Sep 27, 2010 12:05am [ 19 ]

I am in the process of making an iPhone app via Flash CS5. Would you have any idea on how to do this using that platform?

Sep 28, 2010 12:44am [ 20 ]

Very use full post.. Brilliant!! Thank you..

Sep 28, 2010 9:06pm [ 21 ]

Very nice and informative post. Thanks a lot.

Oct 7, 2010 12:49pm [ 22 ]

If you are a iPhone 4 app developer and need @2x retina toolbar icons checkout this new set: 270 Toolbar Icons for iPhone 4 Retina Display --

Kevin Poole
Oct 25, 2010 3:42pm [ 23 ]

I don't get it, I think I'm in dunce mode. If you're creating app icons at different sizes for multiple platforms, you say you need one at 57px for the iPhone, and 114px for iPhone 4, but shouldn't you also have the right resolution for both? So the 57px icon for iPhone would be 160ppi, and the 114px icon for iPhone 4 be 320ppi? I'm working with an app developer, and this is causing us problems, especially as we're working with Android and Blackberry apps too...I'm getting confused!!!!

Oct 25, 2010 4:03pm [ 24 ]

No need to worry about the resolution, iPhone handles that for you. All you need to do is provide images at the various pixel sizes, and each device will display the correct icon in the correct size.

Olie Kay
Nov 30, 2010 5:20am [ 25 ]

Any recommendations for how low you can go with type point sizes on the retina display?

VERY handy post by the way. Cheers.

Dec 1, 2010 7:39am [ 26 ]

iPhone 4 has the best display on a mobile phone but the other competitors for it are Samsung's wave and galaxy s which sport super AMOLED displays which rather look better than retina display at times!!..

Dec 7, 2010 4:08am [ 27 ]

Really Cool article, Josh! I already done a set of vector Icons for my last iPhone/iPad app. I'm creating more generic icons and will share once completed. Cheers!

Kate Ratner
Dec 9, 2010 4:28pm [ 28 ]

Sorry, I may overlooked something....512x512px, but what should a file resolution? 72 pixel/inch like for the web? 326?

Dec 22, 2010 4:14am [ 29 ]

Great article, but there's one thing you're not saying (and yes I'm a newbie in iphone dev :)

When you design in fireworks or illustrator, which setup choosing : a 480*320 with ? dpi (72, 160, 326) .... Idem when exporting in illustrator... I don't get the dpi stuff ...

Thx for any help

Dec 22, 2010 11:21am [ 30 ]

iOS doesn't pay attention to the DPI, so you can set it to whatever you like. The only thing that matters here is the overall pixel size of the original and 2x images.

Nuno Barros
Dec 29, 2010 12:47pm [ 31 ]

Great article. Based on this information I just created a small tool to create all files from a base 512*512 image.

Luis Tovar
Dec 31, 2010 1:51pm [ 32 ]

Thanks for this. You kept it simple and to the point, I now know what I need to do to get that crisp look! Thanks again... gotta go now, looks like I have some work to do!

Jan 5, 2011 8:42am [ 33 ]

Thx for your answer Josh.

I'm sorry to insist but why a tutorial like here < a href=""> says with a cool picture showing it : "Depending on the device you have selected you will need to export the graphics in the recommended PPI, you can do that in your favorite image editor."

Fot newbies like me, it is quite confusing.

Jan 20, 2011 10:25am [ 34 ]

Hi guys! Thank you for the great article! We are also new bodies in iPhone dev. Now i see that i have to use several icon types, but i cant find where can we put them to the app?? Now im ready to upload the binary in the app loader. But where can i insert the icons next to the 57px version?

john hansard
Feb 12, 2011 6:46am [ 35 ]

UHM, it QUADRUPLES the resolution - (x2 on the x-axis and x2 on the y-axis), not doubles! "the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels"

Feb 27, 2011 1:43pm [ 36 ]


Mar 13, 2011 2:07am [ 37 ]

Doesn't work for me.

I had one picture 320x170 (image.png) and everything worked fine, but when I created a 640x340 (image@2x.png) and put it in resources no picture is displayed on the app.

Strange thing is, if I resize (image@2x.png) to 640x339 then it works, only I get a blurred image.

What am I doing wrong?

Mar 13, 2011 2:27am [ 38 ]

Regarding my previous post, my "test"-phone is running ios 3.1 or something. The pictures appear on the simulator (4.2) but no picture is visible on the iphone itself. What's confusing me is that pictures appear if I change the width or height by one pixel, as explained before.

Sorry to bother.

Mar 13, 2011 2:27pm [ 39 ]


This method didn't work at first but after performing a clean build everything worked as described.

Sorry for cluttering up your blog, Josh. Please feel free to delete my previous posts.

May 9, 2011 9:52am [ 40 ]

who can i creat a app icon for iphone 4

Carlos C
May 11, 2011 3:24pm [ 41 ]

Excellent post, thank you for taking the time to share!

Jun 12, 2011 5:49am [ 42 ]

Thanks Josh Clark

This is great stuff. So many thinks are not spoken at apple page but clarified here.

Thanks a lot. Alex

chirag mistry
Jun 12, 2011 8:32am [ 43 ]

see htc droid

Jun 20, 2011 1:55pm [ 44 ]

What if you're creating graphics for a mobile website? Not an actual iPhone app. Do the same @2x principles apply? Or is that purely for native apps?

Jun 21, 2011 4:26am [ 45 ]

Russell, have a peek at this comment above for links to resources that explain how it works for mobile websites.

brendan galea
Jul 12, 2011 9:15pm [ 46 ]

I'm making a native app and for some reason the higher quality images are not getting picked up. I've named each higher quality image the same name as the lower quality images with the "@2x" added on, and I'm running the program on the iphone 4.3 (retina) simulator. I might be missing something obvious, but as of right not I'm out of reasons for why this is not working.

brendan galea
Jul 13, 2011 12:28am [ 47 ]

Ok, so I've discovered that the problem wasn't the @2x, but that older images that have been deleted that share the same name as newer images are being loaded instead of the updated images. How could I make the program run so that the newer images are being used instead of the older ones. I've tried restarting Xcode and my computer as well as doing a clean build. Any suggestions?

Luke Holder
Sep 15, 2011 8:59pm [ 48 ]

Excellent Post. It's not easy finding good resources and easy to follow breakdowns of the demands of apple. Thank God its not android i'm developing for. I have a question though...What resolution in terms of pixels per inch is recommended?, i mean both for the images within the app and the images for the icons. Most books i have, written for iPhone 3 development suggest 72ppi, but that doesn's show up as very crisp. Thanks for the article though, and keep em coming :)

Sep 26, 2011 3:44pm [ 49 ]

iOS actually ignores the PPI resolution that you set, so don't worry about that too much. All you need to worry about is the overall pixel dimensions, not the dots per inch.

Sep 27, 2011 4:58am [ 50 ]

Fantastic article. I love stumbling across this kind of insight on the web. And although I haven't used it, the webapp mentioned above which converts 512x512 pngs into all the various other sizes one might need looks to be a real gem! Great work.

Sep 27, 2011 4:59am [ 51 ]

For those he can't be bothered to read up, that webapp is here:

Oct 1, 2011 2:55am [ 52 ]

Great article, thanks!

Just one question, if I want to display a photograph in Safari on the iPhone4 (in vertical orientation) and display it full screen (i.e. max visible width) what should the resolution of my photo actually be to make the most out of the Retina Display? How many pixels wide?

Thanks for your help!

Oct 1, 2011 10:14am [ 53 ]

The iPhone 4 pixel size is 640x960, so that should be the minimum size of your photo for that device.

Oct 6, 2011 3:17pm [ 54 ]

Building a webapp for use on iPhone 4, I created static images of 500x150 for my opening screen. Using a standard img tag to show them, the simulator shows them extending off the right side of the screen by at least half the image. This happens if I use any of the simulator 'devices'. iPad/iPhone/iPhone 4.

I don't have any CSS controlling the width, i just can't get the simulator to show it properly.

Jack Dorsal
Oct 19, 2011 2:56am [ 55 ]

Dear Josh!

Thanks for this informative article.

I am dealing with a reverse scenario. My client has sent me a PSD of resolution 960 x 640 to slice the images for iPhone4. Now I have sliced all the images which are of high resolution.

Now what is the alternate to accommodate the high resolution images in iPhone 3GS. I don't want to create another set of images of 320*480.

Please respond as I believe that this scenario is missing in this article.

Regards, Jack D.

Oct 19, 2011 3:03am [ 56 ]

Sorry, you have to create a second set of images—one for low resolution, one for high resolution. A hassle, I know, but that's where we stand.

Nov 30, 2011 4:41pm [ 57 ]

Dear Josh,

Thanks for this post. Can you give any insight into saving assets for Android?

Thanks! Melissa

Mar 10, 2012 1:56pm [ 58 ]

The Retina display is simply amazing. Although it does make iPhone screen repairs a little more expensive, unfortunately! Apple have now included it in their iPad 3 - I can't wait to see how incredible this mega-HD display looks on a tablet!

Mar 11, 2012 4:31pm [ 59 ]

Ok, one question i understand the hassle with pixel doubling and images, but can't find anywhere what about <div>'s for example ? If the resolution of iphone4 retina display is 960 x 640px, if i make one div that is large exactly 640px it should take the whole device width. But the result is that the div is double the width of the screen ??? So how to specify in css with exact pixel values the 100% width of the screen ? If i use 320px the div fits, but that's not the Iphone4 resolution??? (but the Iphone3 res.)

Mar 12, 2012 11:16am [ 60 ]

@sikocer: Great question. The essential thing to know now for designing for multiple devices on the web is that: a pixel in CSS and HTML no longer refers to a device pixel, the actual dots on the screen. So even though the retina display has 640 pixel width, it's actually only 320 as far as the browser is concerned. This article is really focused on native apps, but you can learn more here about managing screen resolution on the web.

Mar 12, 2012 6:22pm [ 61 ]

Very helpful, thanks. Will you be updating this information for the new iPad 3?

Mar 17, 2012 5:05pm [ 62 ]

HI Josh,

I keep seeing the same question here and your same reply about resolution. When you create a document in Photoshop, you're asked for width, height and resolution. I think what everyone I see here is asking, what number do we put in the resolution box. It doesn't matter if iOS ignores resolution, it matters to the designer because we can't create a file in Photoshop without entering in a number.

Apr 12, 2012 3:02am [ 63 ]

Thank you for the article, it is really helpful.

I knew that retina display need different size design, I forwarded your article to my designer as well.


Apr 19, 2012 3:39pm [ 64 ]

@marcus: You can put any number you like in the dpi for Photoshop. It won't affect how your app or website displays the image. It will, however, affect how the image prints. So, if you plan to print the image and you want it to display at the same size as the phone, then enter the phone ppi resolution. For retina display (iPhone 4/4S), that's 326 dpi. For older phones, it's 163 dpi.

Hope that helps!

Apr 21, 2012 10:52pm [ 65 ]

Amazing article!!!

So when developing web apps, you can continue using "px" unit normally? For a full width use "width: 320px" and everything will workout?

Montana Burr
May 7, 2012 6:42pm [ 66 ]

Question: How would the icon look on the 3GS if I just had one app icon and it was the retina display? I just think it might be a waste of space to have 2 icons for iPhone.

May 9, 2012 9:19am [ 67 ]

You've mentioned numerous times in the comments about how iOS ignores DPI so it doesn't matter what you set it as (unless you want to print), but what about other OS'?


Steffen Daleng
Jul 9, 2012 7:16pm [ 68 ]

Its a nice compilation. Thanks

Dec 15, 2012 3:24am [ 69 ]

This new feature is osam but why not do the UI design in Fireworks? We did this for our app Favorelli this year and were caught cold by the Retina display in April. Thanks to Fireworks’ unique merging of pixel-perfect control of vector drawings, we were able to scale up like 800 UI ressources in 5 hours flat!

Of course, not every UI element can be done completely in Fireworks. But still, this thing is a lifesaver!

Dec 28, 2012 8:46am [ 70 ]

I like your concept designing for iPhone 4.

Can you send me download link for this app?

It’s really very informative information post.

Great job; please keep sharing insight.

iPhone Application Development Services

Mar 15, 2013 1:22am [ 71 ]

Hi, I have made graphics for an iphone app. Icons look perfect in 1x and 2x both but wherever i have used images(logos of different places), it all gets pixelated. Have taken 326ppi and png24 to save them in photoshop. Are these particulars wrong, wat should i do to create images that look "not" pixelated..!!!!!!!

miri davidovitz
Nov 29, 2013 6:36am [ 72 ]

Thank you , but in which measurements is this -

320x320 (iPad)
64x64 (iPad)
44x58 (iPhone 4)
22x29 (older iPhones)
Mabel Ney
May 14, 2014 5:37pm [ 73 ]

Hey Josh, We are developing for OS X. Our designers design in pixels but the developers want the graphics to be defined in points. When the designers talk they say an image is 512 x 512 px for standard and 1024x1024 px for retina. The developers need points so they know what to pout in the code.

How would you handle this conversation?

Thanks for your help.

Add a Comment

Don't be shy.

(Use Markdown for formatting.)

This question helps prevent spam:

Blown Away

“I’m blown away by Josh Clark’s deep understanding of the iPhone user experience.”
—Jürgen Schweizer, founder of Cultured Code, maker of Things iPhone app

“It’s rare to find a person like Josh Clark who speaks so intently to the topic of interface design and mobile devices.”
—John Maeda, president of Rhode Island School of Design

“If you have time to read only one book on what makes apps successful, it is Tapworthy by Josh Clark.”
—Andreas Sjostrom, manager of mobile solutions, Sogeti