Preparing your iPhone App for Higher Resolutions

With the iPad and the new iPhone 4 gaining popularity, it seems that iOS devices are quickly heading towards higher resolution displays. Higher resolution screens obviously make for a better user experience, but in order to take advantage of this, developers need to update their applications. This article will explain what all the fuss is about, and how to make your applications look good on higher resolutions by demonstrating two techniques for graphics optimizations.

Resolution, Screen Size and the Retina Display

The iPad has a bigger screen, and so it has a bigger resolution. With the iPhone 4, however, Apple did something different: they increased the resolution without changing the physical size of the screen. This makes for a higher pixel density, pixels are smaller and more tightly packed. In one square inch of the iPhone 4’s screen there are around 106 thousand pixels (at 326 PPI, or Pixels per Inch), while the older models have only about 26 thousand (at 163 PPI) in an inch – 4 times less! This makes graphics on the screen seem like continuous lines, because your eye can’t see the individual pixels. Apple calls this technology the “Retina Display” because they claim the human eye (the retina) can’t physically see the pixels at this resolution.

One of the great things about iPhone development, compared to other platforms, is that you know the precise size and resolution your application would be displayed on, so you can design and create to cater to those dimensions specifically. In order to keep that advantage as much as possible, Apple has doubled the resolution exactly – each pixel is replaced by 4 smaller pixels. This means that even if you choose not to take advantage of the Retina Display, your application will look the same as it does today.

On the iPad, where both the screen and the resolution are larger, Apple has allowed for “Pixel Doubling”, which blows up your applications to 4 times its size. In terms of pixels, your application after doubling is the same size as it would be on the Retina Display. This way you need to optimize your application only once, for double the resolution – on the iPad and the iPhone 4 (Unless, of course, you want to create a specific iPad version.)

What does this mean for my applications?

You have to hold an iPhone 4 in your hands to truly appreciate its screen and the importance of updating your application’s graphics. Optimized applications look noticeably better than the ones that aren’t, and updating isn’t as hard as you might think.

Already without doing a thing, any default Apple supplied Cocoa UI elements will render at a higher resolution on the iPhone 4. Text, Web Views and the like will also automatically update, so if you build your application entirely out of default UI elements you have no optimizations to make for the retina display! However, any pictures or image-based custom UI elements you might have in your application require some more work.

Generating higher-resolution graphics in Photoshop

The first step is to make a higher resolution version of each of your images. This will be demonstrated in Photoshop but the same principles can be applied in any graphics program.

Whenever you design an interface in Photoshop you should use non-destructive methods as much as possible. Creating your shapes with Vector graphics, using smart objects and layer styles instead of filters allows greater flexibility during the design process. When everything is editable, making small changes is easier, and creating higher resolution graphics becomes very simple.

As a demonstration, we will create a simple button and then make a high resolution version of it.

You should work on the main interface in the “old” resolution” of 320×480. This will allow you to have a better idea of what you are creating. Working from the beginning on the full 640×960 size might be confusing, because it looks huge on most monitors – and when viewing your design on the iPhone you might discover the buttons that seemed large in Photoshop are suddenly tiny. Most iOS devices are still 320×480, and you should target that resolution when designing.

Make a new document, at 320×480 and 163 ppi (iPhone 3G) and using the Shape Tool, draw a rounded rectangle. Make sure you’re creating a “Shape Layer” and not drawing a raster shape or a path. Style the rectangle to look like a button with Layer Styles such as Gradient Overlay, Stroke, Inner Glow and Drop Shadow to give it depth and form.

To make the large version, select Image Size from the Image menu and double the ppi to 326, iPhone 4 ppi. This will double our image size to 640×960. Make sure Scale Styles is checked and click OK. Make sure everything scaled up properly. You can add small details or subtle textures that will really make your application shine on the Retina Display. You now have a larger version of your UI, ready to slice and save.

Applying the Images

Now that we have our interface in Retina-resolution we need to apply it to our application. There are two ways to do that, each with pros and cons.

Using Two Images

The official way of adding high-resolution support to your application is by having two versions of each image, one in “regular” resolution and one in double resolution. Whenever your application is viewed on the Retina Display, the larger image will be loaded automatically. This method allows for full and precise control of how your application will look in each case, and is very easy to apply to your existing applications.

The full size image file should be named however you want, such as “Button.png”. Use this image name in your code and Interface Builder wherever you want to reference the image. The double-size image should be twice the size of its matching smaller image and named exactly the same with “@2x” appended to the name. In our example, we would name it “Button@2x.png”.

Unfortunately, this technique will not work on the iPad; a pixel-doubled application will not load the higher resolution resource. This will probably be addressed in the future iOS 4 update which is scheduled to come to iPad this fall.

Using Scaling

An alternative method to add high-resolution support is using scaling. You load only the large image resource, and then scale it to 50% in your code or using Interface Builder.

To do this using Interface Builder, create a new Round Rect Button (UIButton) and open the Attributes Inspector (Command-1.) Set the button type to “Custom” and select the large image as the Background. Write whatever you want in the Title attribute and style the button further if you want. In order to make our button the correct size, go to the Size tab and change the width and height of the button to half those of the image. The button image, for example, is 300×102, so the button will be 150×51. Because we are scaling by exactly 50%, even the simple scaling algorithm used by Cocoa Touch looks pretty good, given that our image is made of 2 pixel strokes and even-numbered pixel sizes, which are easy to divide by 2.

The result is as good as the specifically sized image when scaled, but this may vary depending on the image used. The same technique can be easily adapted to images and custom views for the same effect. Using this way will give you less control of how your application will look on a smaller screen, but it has a few advantages. The app bundle will contain one of each image instead of a smaller and larger copy. If your application has a lot of images, it might actually make a difference in file size. Furthermore, this is currently the only way to have high-resolution graphics on the iPad when pixel-doubling. Text and Apple UI elements will still be pixelated, but higher resolution images will improve the user experience until Apple adds official support for double-resolution on the iPad.