Optimising for Retina: 10 essential tools

It’s pretty clear that hi-res displays aren’t going away. Modern smartphones almost exclusively boast displays with pixels packed so tightly you can’t see them. Apple has also introduced similar displays to its iPad and MacBook Pro lines, and other manufacturers will soon follow suit. Indeed, Google recently announced its Nexus 10 tablet will have a 2560x1600 pixel resolution, clocking in at around 300 pixels per inch. If you’re keeping count, that’s essentially print quality.

The problem with such high-resolution displays is that although native text on the web renders beautifully on them, raster images do not. Photographs are upscaled and appear blurry, and visual components exported from vector art (logos and the like) get a bad case of the jaggies in addition to the blur. Short of ignoring hi-res displays entirely, your only option is to embrace new techniques and workflows that enable you to efficiently output suitable content. What follows is a list of 10 useful tools, including scripts, techniques and software, which should make this task easier for you.

1. Use the Fico web font for resolution-independent icons

“I’m far more happy producing resolution-independent vector assets such as icon fonts than providing solutions for scaling raster images. Vectors play nicely with responsive devices, images don’t,” thinks Clearleft frontend developer Josh Emerson, who outlined his work with the technology in a recent blog post. It’s certainly true vector-based fonts are flexible and future-proof against further changes in resolution, but they’re time-consuming to create. Fortunately, existing and affordable examples cover the basics, such as the $19 Fico, which provides 52 popular icons.

2. Ape the <picture> HTML5 element with PictureFill

Designer/developer Mat Marquis says that for hi-res content images, he swears by Scott Jehl’s Picturefill: “It mimics the behaviour of the proposed <picture> element, using standards-compliant markup and attributes.” He adds that a key difference between it and many other hi-res image solutions is in Picturefill avoiding a redundant request, only downloading what’s relevant to the user’s context. There’s also a branch that enables a user to set a site-wide preference for hi/lo-res images.

3. Serve hi-res images with Retina.js

Retina.js is another script that makes it simpler for you to serve hi-res images. The script checks through images in the page and swaps in a hi-res version if one exists with an @2x modifier in its filename. There’s also a LESS CSS mixin for more rapidly defining the relevant CSS for the script to hook into. Foresight.js is an alternative in this space, and it additionally attempts to guess network speed before swapping in hi-res images, so give that a go as well.

4. Squish photograph sizes with JPEGmini

A common technique when designing both for hi-res and also responsive web design is to use a large image and have the browser scale it. There are pros and cons to this method, but if you do use it, ensure your JPEGs are squished as much as possible. Designer and author Andy Clarke recommends JPEGmini for doing so, and the similar PNGmini for PNG files. OS X users should also check out native app ImageOptim.

5. Create a CSS3/Modernizr super-team

Oli Studholme recommends making sure “you’re only using images where they make the most sense,” when designing for hi-res. “For example, text is always hi-res, so avoid text as images, and use CSS3 for bling like drop shadows.” The problem with CSS3 is not all browsers in use cope well with it, hence designer Sebastian Green’s suggestion you get to grips with Modernizr: “It’s a great tool to use for CSS3 feature-detection. Not heard of it? Where have you been for the past two years?”

6. Summon Sketch for one-click vector export

For those designers working with bitmap solutions for hi-res displays, it can be time-consuming and tedious to export images multiple times. With OS X vector design tool Sketch, the process is sped up. Exports to bitmaps are done using typical slicing, but each slice enables you to specify layers to include, whether you want to automatically trim transparent pixels, and whether you want the standard @1x image to be joined by a @2x one.

7. Use Slicy to optimise images from PSDs

Another OS X app, Slicy aims to ‘reinvent’ Photoshop slicing. It does this largely by you carefully naming layers and layer groups. On dropping your PSD on to Slicy, it’ll then chop things up and export them, enlarging vectors and layer styles for @2x, or scaling down for designs that are already in hi-res. Further insight into using Slicy can be found on the Realmac blog and also on Veerle Pieters’ website.

8. Derubbish your kerning with TypeButter

One of the great things about hi-res displays is how they make text look almost as good as print. The problem is that this showcases how poor fine type control can be online. TypeButter is a jQuery plug-in that attempts to provide superior kerning, without the problems optimizeLegibility causes. Naturally, it’s not a great script to run on all of a site’s text, but it can improve headings that would otherwise look like they’d been kerned by a drunk goat mashing the keyboard with a hoof.

9. Enable HiDPI in Mountain Lion

Testing with and designing for hi-res screens is best done on the actual hardware. But while it’s one thing to buy a new Android smartphone or an iPad for testing, a new computer is a rather more expensive prospect. If, however, you’ve a Mac running Mountain Lion, you can enable HiDPI mode via a simple Terminal command and reboot, which subsequently places more options within the ‘Scaled’ settings of the System Preferences display pane. Sure, you get the sharpness at twice the physical dimensions, but at least it provides an inkling as to how things work on Retina Macs (and soon hi-res PCs).

10. Create new favicons with X-Icon Editor

As iOS developers have discovered, hi-res displays require you to output more detailed icons – and these also exist to some extent for websites in the form of favicons. X-Icon Editor is an online tool that enables you to directly edit a favicon, but it also enables you to import existing images into one of four slots (from 16-by-16 up to 64-by-64), then tweak, preview and export.

Go with the flow

Finally, if you’re sitting there making whimpering noises, owing to the sheer number of decisions that need to be made regarding reworking content for hi-res displays, help is at hand. Coding guru Thomas Fuchs has created a handy flowchart on how to Retinafy your website. There’s a book, too, which provides further insight into the subject.

Unsure if now's the right time to optimise for hi-res displays? Our Retina feature in issue 235 will help you decide.