With the release of iPhone 4, Apple introduced the Retina display for iPhone and iPod touch. The Retina display has much higher resolution compared to earlier devices. Let’s look at what you should do to make graphics look their best on both displays.
For vector graphics, you do not need to do anything; your code will render as crisply as the device allows. However, if you draw using Core Graphics functions, these graphics will appear differently on different devices. In Core Graphics (also called Quartz), lines, curves, text, etc. are described in terms of points. On a non-Retina display, a point is 1x1 pixel. On most Retina displays, a point is 2x2 pixels (Figure 5.15). The exceptions are the 5.5-inch iPhones, which have a higher-resolution Retina display where a point is 3x3 pixels.
Given these differences, bitmap images (like JPEG or PNG files) will be unattractive if the image is not tailored to the device’s screen type. Say your application includes a small image of 25x25 pixels. If this image is displayed on a 2x Retina display, then the image must be stretched to cover an area of 50x50 pixels. At this point, the system does a type of averaging called anti-aliasing to keep the image from looking jagged. The result is an image that is not jagged – but it is fuzzy (Figure 5.16).
You could use a larger file instead, but the averaging would then cause problems in the other direction when the image is shrunk for a non-Retina display. The only solution is to bundle two image files with your application: one at a pixel resolution equal to the number of points on the screen for non-Retina displays and one twice that size in pixels for Retina displays.
Fortunately, you do not have to write any extra code to handle which image gets loaded on which device. All you have to do is associate the different resolution images in the Asset Catalog with a single asset. Then, when you use UIImage’s init(named:) initializer to load the image, this method looks in the bundle and gets the appropriate file for the particular device.