Buy Now

iPhone 6 Screens Demystified

Update: Read our new Ultimate Guide To iPhone Resolutions!

The Ultimate Guide To iPhone Resolutions

Few days ago, Apple introduced iPhone 6 Plus. The new iPhone substantially changes the way graphics are rendered on screen. We've made an infographic to demystify this.

320 × 480 375 × 667 414 × 736 320 × 480 750 × 1334 1242 × 2208 1080 × 1920 3.5″ 4.7″ 5.5″ iPhone 6 Plus has screen with lower pixel resolution than the image rendered in previous step. Before the image can be displayed on the screen, it must be downsampled (resized) to lower pixel resolution. Physical Pixels At the beginning, coordinates of all drawings are specified in Points are abstract units, they only make sense in this mathematical coordinate space. In the original iPhone, points corresponded perfectly to actual pixels on screen, but this is no longer true. Points Point-based drawings are rendered into pixels. This process is known as rasterization. Point coordinates are multiplied by scale factor to get pixel coordinates. Higher scale factors result in higher level of detail. Typical scale factors are 1×, 2× and 3×. Rendered Pixels The last step is to show the computed pixels on the physical screen. Every screen has pixels-per-inch (PPI) characteristic. This number tells you how many pixels fit into one inch and thus how large the pixels appear in the real world. Physical Device render at 1× downsampling / 1.15 show on device show on device show on device (pixels) (pixels) (pixels) (points) (device pixels) (points) (points) Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ 163 PPI 326 PPI 401 PPI points. render at 3× render at 2×
a iPhone 6 Plus downsamples the rendered image before displaying it on screen. Physical Pixels The content is defined mathematically using point coordinates. Points Content is rendered to pixels using scale factor. This process is called rasterization. Rendered Pixels Rasterized drawings are displayed on the physical devices. Physical Device render 2× downsampling / 1.15 show on device show on device show on device Original iPhone iPhone 6 iPhone 6 Plus 3.5″ 4.7″ 5.5″ render 3× render 1× a a

Line rendering

To demonstrate different rendering of pixels on various devices, we compare how 1-point wide line is rendered on

The downscaling ratio is 1920 / 2208 = 1080 / 1242 = 20 / 23. That means every 23 pixels from the original render have to be mapped to 20 physical pixels. In other words the image is scaled down to approximately 87% of its original size.

23 pixels 20 pixels Original iPhone 3.5″ iPhone 5 4″ iPhone 6 Plus 5.5″ Hypothetical Perfect 3× Display ???

Introducing PaintCode 3. The next generation of our tool for creating resolution-independent drawings.

Learn More...