Retina display is a modern keyword from Apple, introduced along with the iPhone 4. The goal of the retina display is to produce an image that includes so many pixels in such a small space that the human eye cannot detect individual pixels; at least, not at the standard phone usage distance. Since then, Apple has included retina displays in their phones, tablets and MacBooks.
Since then, the concept – that of a high dpi screen – has taken on momentum throughout the electronics industry. Among non-Apple computers, it’s HiDPI. For televisions, it’s 4K. It has become a contentious issue, as many tech analysts look at the math and prove that, with normal vision, a HiDPI display is barely noticeable at best.
Still, Retina displays are here to stay, and it’s something that webmasters will have to consider. An increasing number of web users are mobile, and even PC users – via Apple’s MacBooks and third party 4K monitors – will begin using HiDPI displays.
The definition of Retina displays and HiDPI screens relies on the concept of DPI or PPI. DPI, or Dots Per Inch, was initially a printing term. A higher DPI means a smoother image. PPI is Pixels Per Inch, the same sort of metric for display screens. Apple’s Retina displays set minimum standards for their HiDPI:
• Small devices, such as the iPhone, have a minimum of 326 PPI.
• Mid-sized devices, such as iPads and other tablets, have a minimum of 264 PPI.
• Larger screens, such as MacBooks, have a minimum of 220 PPI.
Note that this has little to do with the software screen resolution of the screen; it’s mostly a hardware metric. A high DPI measure does mean a certain minimum resolution.
For an interesting comparison of different devices, their DPIs and their resolutions, check out http://referencehometheater.com/2013/commentary/image-distance-is-everything-4k-and-hidpi-displays/. The conclusions are interesting, and they indicate that HiDPI is noticeable and useful in smartphones and other small devices.
Unfortunately, with high PI screens, many old-style web standards will need to be updated. For example, pick any small bitmap or JPG image on the web. Something in the 100×100 range, for illustrative purposes. Scale that image up to 200% zoom. It looks fuzzy, right? It’s lost some clarity, some detail. That’s exactly what’s happening with a retina display. Your site is being scaled up in size to view at the normal resolution of the device. Some aspects, such as most fonts, remain unaffected. Others, like images, end up looking fuzzy. This is a particular problem if you’re using graphics that include text, or small graphics that need to be clear to be visible.
Of course, Retina displays aren’t all that common just yet. Only a scant single percent of web users have such high-resolution displays. Still, it’s a problem that will only grow worse with time, as more and more devices incorporate HiDPI displays. It’s better to adapt your site now so as few users as possible experience you at your worst. Some steps you can take:
• Use SVGs for images. SVGs are Scalable Vector Graphics, and they’re just that; scalable vectors. This means no matter what size they are, they’re crisp and clear, no jagged edges to be found. They’re perfect for logos and icons, but they don’t work for photographs, due to the nature of vector graphics themselves.
• Use CSS3. CSS3 is another new standard that only the most modern browsers support, but it’s perfect for Retina displays. CSS3 effects allow you to create gradients, graphics and buttons that act just like vectors, because they are rendered on the scale of the device rather than according to the source image. They also alleviate some load on your server by generating locally, rather than calling an image from a server.
• Use CSS image replacement. If you have a huge, high-resolution image, it works perfectly on a Retina display. On the other hand, it’s too huge for a standard display. You have two options; use the larger image and scale it in the browser, or use CSS to detect the size of the user’s display and call the appropriate image. The first option works if the filesizes are similar, but falls flat with drastically different images. The second option is good for most cases with very different image sizes, where browser scaling would slow down your site significantly.
• Use a 32×32 Favicon. Too many sites forget to update their favicon while they’re making their site Retina-ready. It’s an easy fix, if you remember to do it.
For now, there’s no real elegant and easy solution to designing for Retina displays. You need to either maintain two sets of images for everything, use huge images and scale them in the browser or stick exclusively to vectors.
Now for the big question; what effect does Retina design have on SEO?
For now, the answer is; not much. Google doesn’t care about Retina compatibility, it’s too minor a technology right now. If they do care – and they might at that, there’s no way to tell what all goes in to Google’s algorithm – it’s such a minor facet that the penalty or benefit would be unnoticeably minor. They care about you having a mobile site, but they don’t much care about Retina.
So at the ground level, ignoring Retina displays in your design right now won’t have an effect on SEO. At least, not directly. You may discover that you have a sizable portion of Retina traffic for some reason, so you may lose users gradually as they turn away from a site full of blurred graphics.
What about the other side? Can designing for Retina harm your SEO? In this case, the answer is a qualified maybe. It all depends on how you design. Primarily, it comes down to how you code your image selection.
See where this is going? If you’re using inefficient code to display huge images, you’re increasing your site load times. Site load times are an important SEO factor, so you’ll want to avoid increasing them if you can.
Is it worth it? Should you design for Retina despite the potential risks of a slower site? It all depends on your site and how heavily you rely on high resolution graphics. Unless you’re displaying photos in large quantities, chances are you’re dealing with a time change in milliseconds at most. You can even make up some of the load times with CSS3, if your users support it.
The bottom line is that it may not be crucial to design for Retina displays right now, but in your next redesign, you certainly should. Retina displays will only grow more common and the issue will grow larger, just as mobile traffic itself did.