2013 could be considered the year of the tablet as an increasing number of consumers are turning to the powerful but portable form factor as their computing platform of choice — combining clear, sharp graphics with impressive multimedia capabilities to become a preferred viewing portal for everything from web pages to first-run movies.
While this power is a boon to users, the clarity of these high resolution displays — which can operate at 384ppi (compared to a standard ‘desktop’ display or TV at 72ppi), can leave legacy graphics looking lackluster and of a lower quality than they really are — a situation that is driving designers to seek out cross-platform image delivery techniques.
The JavaScript solution is simple and easy to add to just about any site via a helper script that automatically replaces the images on a web page with high-resolution variants (if they exist).
According to its publisher, Imulus, retina.js (www.retinajs.com) is an open source script that makes it easy to serve high resolution images to devices that employ Retina displays, such as Apple’s iPad, providing a path for bringing these images to your site.
It is a simple enough concept, Imulus explains: When your users load a page, retina.js checks each image on the page to see if there is a highresolution version of that image on your server. If a high-resolution variant exists, the script will swap in that image in-place.
Of course, retina.js assumes that Apple’s specified high-resolution modifier (@2x) is being used to denote high-resolution image variants on your server. For example, source code to call an image to a web page might looks like this: <img src=”image.png”>, with the retina.js script then checking the server for an alternative graphic, “image@2x.png,” existing in the same directory.
Using retina.js is easy, with implementations for JavaScript and LESS.
The JavaScript solution is simple and easy to add to just about any site via a helper script that automatically replaces the images on a web page with high-resolution variants (if they exist). Simply download the retina.js script and place it on your server, including a call to it at the bottom of your page template, before the closingtag, such as: <script src=?/scripts/retina.js?></script>.
The LESS process involves a bit more, however, with the LESS CSS mixin acting as a helper for applying high-resolution background images to the stylesheet. Provide it with an image path and the dimensions of the original-resolution image and then the mixin will automatically create a media query specifically for Retina displays — changing the background image for the selector elements to use the high-resolution (@2x) variant and applying a background-size of the original image in order to maintain proper dimensions — an important step to avoid double-sized images. Implementation involves downloading the .at2x() mixin as part of retina.less and then importing or including it into the LESS stylesheet, applying it to elements of your choice by calling the .at2x() mixin anywhere instead of using the backgroundimage CSS; using the syntax .at2x(@path, [optional] @width: auto, [optional] @height: auto); within CSS.
Users of Ruby on Rails or any other framework embedding hash values in asset URLs based on its content, such as “/images/image-{hash1}.jpg,” encounter problems with the different hash value that high-resolution versions would have, thus automatic detection methods fail because there is no way for the retina.js script to know beforehand what the high-resolution image’s hash value would be, without server side help. Fortunately, www.github.com/imulus/retinajs offers Ruby workaround examples.
Altogether, retina.js is an intriguing option for solving the problems of serving both high resolution and standard resolution images seamlessly and side by side.