Optimizing Your Images For Retina Displays

Today’s digital displays differ from yesterday’s. They range from handheld to TV-sized, but most of them have one thing in common: many are what we’d call Retina-class. Many vendors sell laptops with these higher-density displays, which has profound implications for the images you use across all channels, ranging from social through to email, websites, mobile, TV, and print.

What is a Retina-class display?

Apple introduced the Retina display in 2010 with the iPhone 4, rolling it out across more devices over the next few years. Although Apple trademarked the Retina name, other vendors followed suit with similar displays. Now, most screens from mobile to desktops offer the same crisp viewing experience.

With Retina, Apple squeezed four times as many pixels into the same space, creating a density of 326 pixels per inch (ppi). When viewing at 10-12 inches people stop seeing individual pixels at densities of around 300 ppi, making Retina displays smooth and crisp.

Tablets and notebooks have a lower density (the 2018 iPad Pro has 264 ppi while the 2018 MacBook Pro has 227 ppi) but that’s because people often view from a greater distance. They’re still impressive densities compared to screens ten years ago.

Why should I optimize my images for Retina-class displays?

Before the introduction of Retina-class displays, the average screen density was far lower. Web-based images included enough pixels to cover a certain height and width at a standard 72 ppi. Many included no more pixels than that, because they had to conserve bandwidth.

Increasing pixel density affects the quality of those images because it crams all their pixels into a smaller space. Displaying the image at the same size as before stretches it, putting gaps between its pixels. The result? A fuzzy picture with jagged edges that jars the viewer and detracts from your brand.

Anyone that has worked in print will be familiar with this problem. An image with just enough pixels to fill a web page at 72 ppi will look fuzzy when printed full-size in a magazine at 300 dots per inch (dpi).

You solve this problem on Retina-class displays just as you solve it in print: by increasing the resolution (the height and width of the image in pixels). That way, even when higher pixel densities squeeze those pixels into a smaller area, there will still be enough pixels to display the image at a decent size on the screen.

More resolution means bigger file sizes. That used to be just a print requirement, but now it applies across the board, from website banner ads to social media and blog posts.

How big should your image resolution be? It’s difficult to say, because someone could view it on a tablet, a phone, a desktop computer, or a smart TV. That’s why Facebook doesn’t even bother recommending picture resolutions, except to impose an absolute minimum of 1024 x 1024 for carousel images and for Instagram feed pictures. “Upload the highest resolution image available,” it advises. “There is no max resolution”. That’s because Facebook knows that the quality and diversity of displays will only grow.

Gone are the days when people would browse from one device. Today, viewers access images mostly from their smartphones using a variety of mobile apps. 52.96% of visits came from mobile and tablet devices in March 2019, compared to 47.04% from desktops, according to StatCounter.

The pixel densities on those mobile devices are increasing. People refresh smartphones relatively quickly thanks to contract arrangements, so they will view your images on ever-higher quality displays. Apple’s latest XS Max iPhone has a density of 458 ppi.

Getty Images

That’s why it pays to future-proof your images for evolving requirements. By choosing high-resolution images from the beginning, you can guarantee that your campaign will look impeccable on media ranging from smart watches to social media, blogs and email to print, not to mention newer media like augmented and virtual reality.

Getty Images offers Retina-class, high-quality photographs and illustrations to support diverse campaigns across all these channels, covering usage rights across different formats including large, medium, and small. It also covers a broad range of licensing and media types including royalty-free, video, animations, vectors, and photos. Find the high-quality imagery you need to fuel your campaigns.