Supporting retina devices on your website

A retina display is a marketing term developed by Apple to refer to devices and monitors that have a resolution and pixel density higher (roughly 300 or more pixels per inch) than the usual 72ppi. This basically means that text and appear much crisper (if a retina version of the image is available).

Each and every month the percentage of users viewing our websites on retina displays is rising, meaning that more and more people that view your website are seeing your images in a very pixelated format as they haven’t been optimised for retina displays.

There are a few ways in which we can go about optimising these images:

1. One is to simply supply an image that’s twice the normal dimensions to all users, then display them at 50% to users on ​“normal” displays and full size to those on retina displays. This method has the unfortunate downside that users on ​“normal” displays have to download an image that’s twice the normal file size, which means that if they are on a slow connection the website could be noticeably slower to load. However, it’ll look great for users on retina displays.
2. The second method involves using a third party JavaScript file, which can detect if the user’s on a retina display and if they should serve a higher resolution image. This does, however, mean you have to prepare two images for each image that’s on your website, this can be easily set up in most content management systems by simply automating the process. Basically when an image is uploaded the system can automatically create a high-quality image and a normal quality image, which means the content management user isn’t wasting time creating these themselves. Most of our websites use this method, we use ExpressionEngine’s built-in file manager to do the automated file resizing, before implementing RetinaJS (http://​imu​lus​.github​.io/​r​e​t​i​najs/) to serve the correct image to the website’s viewers.

There is, unfortunately, one downside to RetinaJS and this is that any background images aren’t replaced, but we have a solution for this too, when creating the CSS for our websites (this is the file that dictates how your website should look), we use a LESS mixin that again detects if the user is on a retina display and provides the relevant suitable file to the user, our LESS mixin looks like this:

@highdpi: ~"(-webkit-min-device-pixel-ratio: 1.5), (min--moz-device-pixel-ratio: 1.5), (-o-min-device-pixel-ratio: 3/2), (min-resolution: 1.5dppx)";

.at2x(@path, @w: auto, @h: auto) {
 background-image: url(@path);
 @at2x_path: ~`@{path}.replace(/\.\w+$/, function(match) { return "@2x" + match; })`;

 @media @highdpi {
 background-image: url("@{at2x_path}");
 background-size: @w @h;
 }
}

Hopefully, this will help you get your website ready for all of your retina screen users! If you need a hand with getting your site ready, get in touch!