The pixelated Web

This week I’ve been enjoying a new laptop: a 13” Retina Macbook Pro with a 1TB SSD, 16GB of RAM and a 2.8GHz i7 processor. It’s a monster!

The big surprise is the screen. It’s the first retina screen I’ve used on a laptop and after a little use it’s totally blown me away. I should have known how this would go based on how phones changed in recent years: one moment you’re happily using a non-retina device and wondering why you’d bother upgrading, the next you’ve actually tried that retina screen on a new device and you’re left wondering how you ever stood looking at they pixelly mess on the old one.

I thought I’d be able to take it or leave it on a laptop though, perhaps because you tend to view a laptop from further away and thus, I reasoned, would see a less pronounced difference. Plus in Apple land, the upgrade to a retina laptop also comes with a grim trade-off: these new machines are horrendously un-upgradeable compared to the old non-retina Macbook Pros. The RAM’s soldered on, the SSD is apparently sealed in for good, and the battery’s glued in.

I decided to take the hit nonetheless, and here I am looking at a very sharp screen. It took about an hour for my eyes to get used to the crispness, at which point my old screen was immediately rendered ugly and appalling. The external monitor I use at work now looks rough, to the extent I’ve found myself simply not plugging it in. And I hate to say it, but even the brand new 27” iMac that Jon at SHOWstudio just got looks a bit ropey.

What’s been intriguing is that browsing around the Web, the majority of websites seem not to be retina-ready. The issue here is that, unlike pretty much every LCD released in the past, these retina screens don’t have 1:1 pixel mapping. Let’s say I put a 100px*100px image in a web page and viewed that page on a retina Macbook Pro. If the image was actually displayed at 100px*100px it would be miniscule, because Apple’s packing so many pixels into a small area.

This problem is what’s been holding back screen resolutions for years. Manufacturers have always been free to pack more pixels into their displays, but invariably this was done on the basis of 1:1 pixel mapping, so if they got too advanced and packed too many pixels in there, you’d see a vast expanse of unusably tiny interface elements. What was needed was a new approach across both hardware and software: not only packing more pixels into the hardware, but also scaling things back up in a sensible way in software. Some interface elements can afford to get shrunk down as the pixels get smaller; other things really need to be kept big so the viewer continues to see them at a sensible size.

The result of this scaling is that the retina Macbook is really displaying my 100px*100px at twice its actual size: 200px*200px. That avoids the problem of it being miniscule on the screen, as it gets blown up to around the same physical size as it would be shown on a non-retina screen. The problem is that to achieve this the image has been stretched out to twice its original size, so chances are it looks like a pixelated mess! Happily there’s a simple solution: simply create all your web assets at twice the resolution. Save that image at 200px*200px, but declare something like max-width: 100px in your CSS and it should show correctly in all circumstances: correctly-sized, and not pixelated on a retina screen.

What’s interesting is how few people are actually doing this. Take a website like Rolls-Royce for example. You’d imagine they’d have thought about this on the basis someone in the market for a Rolls Royce is also likely to have an up-to-date laptop like a Retina Macbook Pro. And if you watched that Inside Rolls-Royce documentary as I did the other day you’ll know how strongly they believe that everything needs to look just perfect. But I look at their site now and nearly everything on it is showing up at half-resolution. It’s a mess! And this is going on all over the Web on big sites like GMail and Mozilla. (Interestingly Apple itself isn’t always perfect.)

If you spoke to a Web designer in the pre-retina days and instructed them to downsize all their images to half the size they needed to be, I’m sure they would have recoiled in horror. The images would get scaled up in the browser and they’d look horrible. Developers have spent years knowing that the best way to get things looking just right was to export assets at the size they’d actually be shown at. Any bigger and they’re wasting bandwidth and putting themself at the mercy of the browser’s own image scaling mechanism, which until recently was almost always choppy compared to what you could achieve in Photoshop. Any smaller and things get scaled up and pixelated, making it look like the designer doesn’t really know what they’re doing.

But this is exactly what’s happening across a huge amount of the Web right now! Designers are having their designs shown at half resolution. My guess is it’s due to a lack of awareness (I myself only clocked how prominent this problem is when I got this laptop last week, even though I’ve been using a retina phone for the last year or so) and also due to ingrained habits (to me it just feels plain wrong to serve up assets at anything other than the destination resolution – but this is only because I’ve spent the last decade thinking that, not because it’s correct).

My hope is that over the next couple of years we’ll see the majority of major websites becoming fully retina-ready, as developers come to realise that thinking in terms of 1:1 pixel mapping doesn’t make sense anymore. In the meantime, I must head off and fix my own site…