Making Your Website Retina-Display Ready

In June 2010, Apple filed an application with the United States Patent and Trademark Office for a registered trademark on the term “Retina;” the application was approved in 2012. Since then, users the world over have become enamored with the device-maker’s Retina display, which offers pixel densities so high that it’s impossible for the human eye to detect any irregularities at “normal” viewing distance.

The result? An ultra-clear image technology that has spawned a host of imitators. That technology has also become a challenge for web hosting companies, since web pages don’t automatically default to Retina-capable resolutions. Is there a simple way to make sites Retina-ready?

Apple of My Eye

At the core of Retina technology is pixel density. As noted by PC Advisor, the iPad 2 has a native resolution of 1024×768 and a pixel density of 132 pixels per inch (PPI); Retina-enabled iPads have a resolution of 2048×1536 and a PPI of 264, or exactly double. The result is an improvement in fine detail, especially when it comes to lettering or high-definition imagery.

As noted above, Retina is an Apple creation and a marketing device; it’s not a scientific term. Although the company’s claim of undetectable pixelation was challenged in 2010, Apple’s results were borne out in a Boys of Tech paper, which found that a Retina-enabled iPhone 4 at 12 inches “has a resolution that exceeds the limit of the human eye.” It’s worth noting that phones, tablets and laptops all have different optimal viewing distances: 10 inches for iPhones, 15 inches for iPads and iPad Minis and 20 inches for Macbooks.

The Website Worry

But here’s the problem: Most websites don’t naturally display Retina-level content, because they’re used to serving desktop users. Typical computer monitors fall between 90 and 125 PPI — much less than the 200-plus PPI of Retina devices. When iPad 4 or iPhone 5S users visit your site, images will appear blurry and distorted.

To make website images Retina-ready, start with CSS (cascading style sheet) sprites. For each image, create two files: one at normal resolution and one at double resolution, which will be scaled down; the result will be vastly improved PPI. Tag the normal image file name as “@1X” and the high-res image as “@2X”, which is the Apple-standard notation. While this means doubling the number of files, selectors and references in your CSS, it also means all Retina users will get the right image pushed to their browsers. You can also use an open-source JavaScript option like Retina.js, which automatically checks your servers for high-resolution images and swaps them as needed.

Looking Deeper

Next on the list are scalable vector graphics (SVGs). Instead of using pixels, these images are made up of lines and shapes, making them easily scalable and always sharp. SVGs have been in use for years but are often passed over in favor of .jpg, .gif or .png files because photographs don’t render well as vector graphics. Patterns, logos, graphs and maps are ideal candidates for the SVG treatment — just make sure to run an SVG optimizer to reduce code bloat, and include a fallback option for older browsers by using a tool like Modernizr.

For all other images, consider a server-side option like Retina Images. Here, you don’t need to change <img> tags, so long as pictures have an optimized height and width; simply drop the retinaimages.php and .htaccess files into your document root, and then create a high-res version of any image you want optimized for Retina screens. Retina Images automatically increases resolution on the fly and then reduces image size accordingly.

Apple’s Retina display has become the standard for high-resolution viewing but can’t compensate for low-res website images. Seeing is believing. Make sure your site is Retina-ready on demand.

[image: Sean Gallup/Getty Image News/ThinkStockPhotos]