Newfangled works with independent agencies to create lead development web platforms for their clients.

Newfangled works with independent agencies to create lead development web platforms for their clients.

Why You Should Optimize Your Site for Retina Displays

at 10:00 am

iPadYou may have heard of Apple's Retina display, featured in several of their most recent products such as the iPhone 5 (and 4s), 3rd generation iPad and the latest MacBook Pro laptops. And you may have seen one of Apple's TV spots showing off the Retina display with amazingly sharp, life-like screen images. And you may be thinking, "Yeah, that's great. But I don't even use a Mac so what does this have to do with me?" Glad you asked.

Apple has frequently incorporated new technology into their consumer products long before the competition. "Retina" is Apple's name for their high density display, which features 2-3x as many pixels per inch (PPI) than standard displays. Retina may well become the de facto industry term for high density displays (podcast, anyone?) but, regardless of the name, high density display technology will become the norm within a few years and those of us who develop for the web would be wise to address this change now rather than play catch-up later.

What is Retina?

To understand how Retina works you need some basic information about the pixel unit. Pixels are the building blocks for images on computer displays and there are two basic types. A device pixel is the smallest physical unit in a display and each one is individually controlled by the computer's operating system for color and brightness. A CSS pixel is an abstract unit of measurement used by browsers to draw content on web pages. In most cases, 1 device pixel is equal to 1 CSS pixel. 

A Retina display contains 2-3x times as many device pixels per inch than a standard density display. It's like the difference between a 400 thread-count bed sheet and an 800 thread-count bed sheet. The 800 count sheet isn't physically twice as large as the 400 count sheet, but has a much tighter weave and thus, better quality.

To the naked eye, a Retina display produces images that are sharper and more life-like because they contain more detail. Text is also sharper and more readable at small sizes, which is important for smartphones and other mobile devices that have smaller screens.

device pixels vs. css pixelsThe Challenge

Website images optimized for the industry-standard resolution of 72-96 PPI degrade somewhat on Retina displays and look soft or slightly out of focus. This not only applies to pictures, but also to logos, user interface icons and image text. 

Because an image's physical dimensions on a standard resolution display need to be the same on a similarly-sized high density display (i.e. iPhone 3 vs. 4s), the pixels are interpolated, meaning the hi-density display has to artifically double or triple the number of pixels in the image to give the impression that it's the same size.

retina vs. standard displayYou may be thinking, "So the images are a little soft, I can live with that." And most people do, for now. The quality difference between Retina and non-Retina displays is not as noticeable on a smartphone as it is on larger displays like tablets and laptops. But what happens when triple-resolution or quad-resolution displays become the standard across all devices? It's best to familiarize yourself with the technology and develop a strategy now and be better prepared for the future.

Suggested Solutions

At the moment, there is no single solution for optimizing website content for high-density displays so here are some options (at the bottom of this post are links to resources that go into more technical detail on the subject).

1) Wait for someone to come up with a bullet-proof solution. 

This may happen down the road, but if you start addressing the high-density display issue now you'll be ahead of the curve and quite possibly a hero to your clients. 

2) Double the size of all your images. 

Instead of uploading a 300 x 409 pixel image to your site, upload a 600 x 817 pixel image instead. Keep in mind that you are more than doubling the file size of the image when you double the dimensions. (see this demo). Your site may not take much of a performance hit if you're dealing with just a few images, but what about a gallery of 300 images? This could put a significant strain on bandwidth for your viewers, especially those accessing your site on mobile devices with reduced-band networks such as 3G or Edge.

3) Progressive Enhancement

Progressive enhancement is a collection of best practices that not only provide ways of enhancing images for high-density displays but, in some cases, replace pixel-based graphics altogether, making your site faster and leaner. 

CSS: Wherever possible, use this robust markup language to create your site's visual architecture (gradients, rounded corners, etc.) instead of custom graphics.

SVG: Scalable Vector Graphics are created using mathematical expressions instead of pixels which means they can be infinitely scaled and their files sizes are a fraction of pixel-based graphics. SVG has almost universal support among modern browsers including mobile versions (some older versions of Internet Explorer lack support for SVG).

Web fonts and icon fonts: Custom web fonts are now widely available so there's no excuse to use graphics as text or limit your site's typography to Verdana, Georgia, Helvetica and the rest of the usual web-safe suspects. Icon-based font sets behave just like custom web fonts (so they're scalable) and provide a way to replace raster-based icons. 

Ask Your Developer: There are several code-side solutions, in various stages of development, for efficiently serving up high-res graphics in the browser (@srcset, Picturefill, <picture> element). Ask your doctor developer if one of these solutions is right for you.

This post only brushes the surface of the high-density display issue. For more in-depth information, check out the following resources.

A List Apart and Smashing Magazine suggest some solutions for high-density displays in these great in-depth articles:

Mo’ Pixels Mo’ Problems

Towards A Retina Web

And here are some articles that address possible solutions for Retina displays:

Resolution Independence With SVG (Smashing Magazine)

Options for @font-face Implementation (Web Designer Depot)

My Beefy Adventure with Icon Fonts (The Nerdary)


Agoes Kusnaeni | June 12, 2014 7:55 AM
A very valuable article.
My wordpress site have feature retina. But I don't know the benefits. I don't even know what it means, and how to use it.
Your article inspired me to use the retina feature.
Vishnu | June 10, 2014 8:59 PM
Nice article. Have been developing for 2 years now, keeping Retina in mind and supporting it. This article is a good starting point for all beginners to get a good understanding.

↑ top