Retina

As a professional iOS developer, I have the solemn duty of ensuring that my computer is up-to-date (i.e. I get to buy the latest and greatest Macs and justify them as business expenses. It’s rough). My primary computer was, for a while, a series of iMacs, then a Mac Pro, and—up until a few weeks ago—a MacBook Air. I’ve also used MacBooks and Mac Minis extensively, though never as my main machine. That leaves just one, the MacBook Pro, on which I’m now proudly typing this, rounding out my exhaustive case study.

I’m now using a 15″ MacBook Pro with a retina display, a 256GB SSD, a quad-core 2.6GHz Core i7 and 16GB of ram. Simply put, it’s the best computer I’ve ever owned by a huge margin. I could rave about how powerful it is, how neat those asymmetric fans are, or why having a 15″ ‘portable’ computer isn’t as impractical as it may sound, but that’s nothing compared to the real icing on the cake—the display.

Maybe you’ve owned an iOS device with just such a display before. If so, you may remember marveling at it for the first time. This is better than that. It’s beautiful, and I think I’ve been spoiled forever.

Which brings me to the main point of this article. While most things look amazing on the IMAX-like screen, the web is a mixed bag. Sure, text looks crisp and neat, but most images look dull and fuzzy. Apple has plopped this great new technology into our laps, and as web designers (one of my many hats as a sole proprietor) we’re left to figure out how to leverage it without so much as a blip for the rest.

So what do we do? There are four basic options, as far as I can tell:

• Use double-resolution images and set their width and height to half of what they actually are. This works great on computers but looks inexplicably terrible and jagged on iOS devices. Since all of my sites feature iOS apps, that’s not acceptable for me. All of your images will be larger, too, so page loading will take longer for everyone, even if they’re not able to take advantage of the extra information.

• Use SVG images that aren’t pixel-based and can scale up infinitely. Unfortunately, they’re relatively unknown, harder to create, and not supported by all of the many browsers via which one’s site is likely to be visited.

• Use CSS’ background-image property to set the correct image before it even loads. I personally don’t feel as comfortable using DIVs for every image on a page and jumping back and forth between HTML and CSS just to insert an image, so while this works great for theme images (borders, menus, and the like), it’s not so great for content images.

• Use javascript to check screen resolution after the whole page has loaded, and—if necessary—replace all of the images with any double-sized alternatives that might exist on your server. Larger images will only be loaded when appropriate, keeping page load times down for the rest.

I chose a combination of the third and fourth options. For general theme elements, I use CSS to define the correct image before it loads. For the rest, I used a modified version of retinajs which caches images rather than forcing retina users to download the larger version each time they return. It’s easy: just put a copy of your image on the server with the @2x suffix, and run the script just before the closing body tag on your page.

There are some quirks, though, and I’m hoping that the Web At Large™ will come up with some better alternatives as retina displays become more common. One such quirk is the script’s inability to work with images that have dashes in their filenames. Another is the fact that loading a page on a retina display is a little jarring—you get SD versions of everything, then a split second later you get the HD versions. It’s like those old interlaced images from a decade ago that would load in alternating sets of lines.

Retina displays are great, and they’re becoming more popular every day, so I’m sure that this will be a very different story a year from now. For anyone wanting to get a head start, this is the best solution I’ve found so far.