How To Optimize Your Website for the iMac 5K Retina Display

On a recent trip to Best Buy, I found myself standing in front of Apple’s newest iMac, basking in the glory of its glorious 5K retina display.

The background image, a canyon landscape, was amazingly crisp. The Finder icons and their labels were crystal clear. Interface elements were sharp as a tack. Then I fired up the web browser and things took a turn.

The default page, Best Buy’s home page, looked…blurry. I navigated to a half a dozen other websites and the trend continued. So, what was going on there? Was it possible the 5K screen wasn’t all it was cracked up to be?

Not exactly. The Best Buy website wasn’t built with this display in mind. However, with the right tactics, you can avoid this mistake on your own site.

The Problem: Blurry website images on the 5K iMac

A closer look at a website on the 5K iMac would reveal that text and other interface elements which are generated by code still looked great. Images, however, tend to be on the fuzzier side. That includes logos, banner graphics, some buttons and product images, among other things. You know, the important stuff.

So, why is this?

On the regular iMac, an image that is 400 pixels wide might appear to be about 3 inches long on your screen. However, on the 5K iMac, that image would only be about an 1.5 inches wide. This is because the 5K iMac has double the resolution, but the same screen size, meaning that it has tinier pixels crammed into the same amount of space. That makes things look great. The downside is, it can also make things look small.

In order to avoid that, the 5K iMac automatically stretches everything out – so a 400 pixel image on the regular 27″ iMac looks the same size on the 5K display. If you’ve ever stretched an image out, you know it can get blurry.

The Solution: How to Optimize Your Images for the iMac’s 5K Retina Display

Use higher resolution images. If you take an image that is twice as big as it needs to be on a traditional monitor and use code to squish it down for display on your website, it will look sharp for “normal” users. Then, when it’s stretched out for someone on a 5K iMac, you won’t actually be stretching the image – you’ll be displaying it at its original size – and it will still look perfect.

There are also ways to check the zoom level of a web browser (i.e. how much it’s stretching things out) and provide different versions of images based on that. HTML5 even offers some native tools to help with this.

Web designers have actually been implementing variations of both of these solutions since Apple first introduced the iPhone 4 with retina display, which uses the same scaling technique to stretch out content so it fills the screen. The retina MacBook Pro line does the same thing, as do a number of popular Windows machines, like the Lenovo Yoga Pro 3, or the Microsoft Surface Pro 3.

The difference here is that the iMac’s screen is much larger than any of those machines. Basically, in some cases, you may need to use even bigger images.

More Trouble: Larger Images Mean Larger File Sizes

Larger images = larger file sizes = longer load times. It’s not practical (or nice) to burden someone using a more traditional monitor with having to load extra large images that will only benefit those with fancy-schmancy computers.

As I already mentioned, one solution is serving up different versions of images based on a user’s display. In a perfect world, it would be great to do this for every image on your site, but in reality, it’s primarily important to make sure you’re covered in specific cases – like with your logo, or images that contain text or diagrams. You can often get away with scaling photos, with very few people even noticing the difference.

Another solution is using vector-based SVG graphics, which can be scaled to any size without losing quality. However, SVG graphics can be finicky when it comes to displaying them properly in a web browser. Plus, they’re not a practical choice for many types of images (for example, an SVG photo would have a ludicrously large file size).

Why You Need to Optimize Your Website for High-Resolution Displays

Maybe you’re saying to yourself, “It’s just one computer, right? It can’t be worth all this hassle.”

Hold your horses.

There are several high-end 4K+ monitors that have come out over the past year or so that face the same issues. Plus, we all know the industry trend: once Apple does something, other companies jump on board quick. There’s no doubt we’ll be seeing many similarly spec’ed displays in the near future. Before long, I’m confident that such high resolutions will be standard.

The Bottom Line

The technology exists to solve these issues now, so you should be addressing them now. When a potential customer hits your site, do you want them seeing a blurry version of your logo? Do you want them to squint to read your charts and graphs? No, obviously not. Unless you’re an optometrist.

That said, there’s no one-size-fits-all solution. To get the most out of your website, you need to be able to mix and match your approaches for displaying images.

---

Not sure how your website would perform on an ultra high-resolution display?

Or what your best approach would be for optimization would be?

In the meantime, I’ll be in the iMac area at Best Buy until they kick me out, or I start to bleed from the eyes.