Resolution and Interpolation
Resolution is defined as number of pixels per unit of measurement (i.e. an inch or centimeter). The word “pixel” is derived from the words “picture element” and is the smallest element (or “building block”) of a digital image. Essentially, resolution describes the size of a single pixel.
Bitmap (or “Raster”) images are based on pixels, and should have the same pixel dimensions as the device the images will be displayed on. If this type of graphic is displayed on a screen with different pixel dimensions, the apparent quality of the graphic will be reduced. A common example of this is when a graphic like a photograph appears “blurry” when displayed on a large screen. This is caused by a process called “interpolation”.
When a pixel-based graphic is enlarged, the original pixels are distributed over the larger display area. This creates “gaps” or “missing pixels” between the original pixels. The process of interpolation fills in the missing pixels based on the information in the surrounding pixels. This produces a larger image, but the sharpness of the detail in the image will be reduced.
Retina and Non-Retina Displays
It is important to understand that screens with the same physical size can have different pixel dimensions. One common scenario where this becomes important is in the difference between Retina and Non-Retina displays. For example, the iPad 2 and iPad Air 2 both have screens with the same physical dimensions (9.7 inches diagonally), but they do not have the same pixel dimensions. The iPad 2 is an older model, and it has pixel dimensions of 1024px by 768px, or 132 ppi (pixels per inch). The iPad Air 2 is a newer model, and it has pixel dimensions of 2048px by 1536px, or 264 ppi.
Apple has chosen to use the term “Retina Display” to describe displays where the human eye cannot discern the individual pixels at a “normal viewing distance” (a foot or more from the screen).
Since the iPad Air 2’s Retina display has more pixels per inch than the iPad 2’s Non-Retina display in a screen of the same physical size, it follows that each one of those pixels is smaller in the Retina display. The iPad Air 2’s pixels are half the size of those in the iPad 2, which means that there are four times as many pixels in the Air 2’s display. Smaller pixels enable a greater level of detail in a graphic.
This difference creates a challenge when designing for an iPad. Graphics that are designed for Non-Retina display will be “upscaled” (enlarged) on Retina devices, leading to blurry images.
iOS Handling of Display Differences (1x vs 2x)
Since not all iOS devices have Retina displays, iOS provides a way to manage assets in your project so that both Retina and Non-Retina displays can be accommodated. This is handled using a standard naming convention that identifies Retina and Non-Retina assets. Non-Retina assets are designed for a 1024 by 768px display. Retina assets are designed for a 2048 by 1536px display and are named with a @2x just before the file extension. For example, for an image called “example.png” you would create two versions: one at 1024 x 768 called “example.png” and one at 2048 x 1536 called “firstname.lastname@example.org”.
When a project containing assets named this way is displayed on a device, iOS uses the naming conventions to display the appropriate assets for the device being used. A Non-Retina device would display “example.png” and a Retina device would display “email@example.com”. This ensures that each device is able to display a clear image. To find out how to include both types of assets in your SmartStudio applet, read this article.