Retina Display

 Retina Display

Retina Display is a term, or brand, coined by Apple for display screens on the iPad, iPhone, iPod Touch, and MacBook Pro. It means that a display has a high enough number of pixels per inch, or PPI, that the human eye can't detect any pixelation at standard viewing distances.

The PPI qualifying a screen as a Retina Display varies from device to device as each one has a different viewing distance and screen size. For smaller devices, like the iPhone, there are 326 pixels per inch. The iPad, having a larger screen than the iPhone, has 264 pixels per inch, and the MacBook Pro, having the largest screen, has 220 pixels per inch.

Note

Most human eyes cannot observe detains above 300 PPI at a distance of 12-inches.

Autumn 2018 marked a watershed in screen technology as the Macbook Air upgraded to a Retina display. This followed a similar shift by the Macbook Pro years earlier to Retina, and represents a broader shift to higher definition displays for newer computers. Unknown to hoteliers, their prime digital content began appearing blurry and stretched to their website visitors.

What is Retina?

Retina is a marketing term coined by Apple to describe screens where the pixels are invisible to the naked eye, making the computer interface clear and crisp. Pixels are the very small individual dots that light up and change colour to make up the image on a digital screen. Whilst the term Retina is exclusive to Apple and perhaps more known to consumers, the technology is far more common, and is often referred to as HiDPI, or High Dots Per Inch. Across the computer and smartphone industry, display manufacturers are moving towards higher-resolution screens like the 4k standard (which literally stands for 4,000 pixels), meaning lower-resolution displays are slowly becoming a relic of the past.

In practice, Retina and HiDPI displays achieve their crisp look by fitting smaller pixels into the same space. Consequently, Retina and HiDPI displays have far more pixels to fill the same space as lower-resolution, standard displays.

The problem:

More pixels to fill the same space introduced a problem; if pixels are way smaller, then all icons, menus and images would shrink with them. A 400 pixel image would appear tiny on a screen when pixels halve in size.

To solve this problem, Apple exactly doubled the width and height of everything on the screen. So a 400x400 pixel image would not be shrunk with the size of pixels, but would remain the same physical size, but now spread across twice as many pixels (800x800).

The invisible killer

Retina has had a big impact on the quality of content on Hotel websites. Most websites are built for non-Retina displays, meaning that for visitors browsing on high definition Retina displays, images and logos are stretched and appear blurry.

As many marketers and e-commerce managers are designing and testing website content on non-retina displays, this can mean they often aren’t even aware of the quality drop. Ultra luxury brands renowned for manicured identities and backed by branding budgets in the millions, can miss a clear and seemingly obvious fault.

The first victim of Retina displays is the hotel logo.

Example 1: A non Retina optimised image, the prestigious Ritz-Carlton Logo, appearing blurry on their website masthead

The Ritz-Carlton's Website

​

How the logo appears on the author's computer. Notice the soft edges on the text?

The second victim is text used in images, as these rely on sharpness for legibility. Relying on images with text imprinted is a quick way to suffer quality issues.

How to be retina ready

Double everything

The simplest fix to the Retina problem, is doubling the width and height of images. That means if the logo is placed in a 100x50 pixel space, then upload an image exactly double the dimensions, which is 200x100 pixels.

Be careful not to go over double the pixels

Designers have attempted to overcome the problem by increasing the size of images by different amounts than double. Such efforts cause the reverse of the Retina problem. Rather than having too few pixels filling a large space, there are now too many pixels filling a small space. The computer will attempt to adjust the size of the image to fit the smaller space by scaling down the image. Scaling requires all pixels to be neatly dividable.

For example, if you shrink 300 pixel image into a 100 pixel space, then each pixel needs to be divided into 3. 10 pixels becomes 3.33 pixel. For visitors browsing with non-Retina displays, this scaling-down will cause blurring (more than Retina displays, where pixels are less recognisable.)

Use SVG

Scalable Vector Graphics, are a type of image that scales infinitely. So, a SVG circle would appear just the same on a small screen, as on a cinema screen, and simply fills the pixel space allotted to it while retaining the shape. SVG is a firm favourite for hotel logos.

Credit for illustration: Wikipedia

As SVGs are primarily shape based, it is not recommended to convert photographs to SVG as this creates giant sizes.

Use text where possible

Where possible, use normal text for headings and normal copy, rather than adding text inside the image. Normal text is designed so that it can be expanded at different zoom levels (and screen resolutions) while retaining the same quality.

Watch out for the size of images

As hotels upload higher quality photography to off-set retina displays, this can create delays in the speed that content is delivered. Before uploading an image, always check that it has been optimised for web. Websites such as TinyPNG are useful in streamlining the file size by undetectably limiting the number of colours used, without compromising on the quality of the image.