Group items tagged

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.

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.