Website

Why your next website has to be retina ready

Philipp Steinweber
Written by Philipp Steinweber

You have probably heard the term “Retina” often enough in the commercials of the recent Apple products. They are by far not the only company betting on the horse of higher pixel density, but they’re the ones who came up with this peculiar, but now famous name. By now, most of the screens of Apple’s products are coming equipped with that feature. Let’s have a look at how that affects your web design and the planning of new projects.

Why your next website has to be retina ready

You have probably heard the term “Retina” often enough in the commercials of the recent Apple products. They are by far not the only company betting on the horse of higher pixel density, but they’re the ones who came up with this peculiar, but now famous name. By now, most of the screens of Apple’s products are coming equipped with that feature. Let’s have a look at how that affects your web design and the planning of new projects.

Retina vs. HiDPI

First let’s make it clear: Retina is a rather unfortunate term, referring as it does to a part of the human anatomy. There is an alternative, which means the same, but puts it into a more comprehensible language: HiDPI. Unfortunately HiDPI is rarely used, as the market at the moment is being dominated by Apple devices using their Retina technology. So you could say: every Retina display is an HiDPI display, but not every HiDPI display is a Retina display.

Why does anything have to be ready for HiDPI?

If you are using an HiDPI screen you know. If you don’t, listen up if you care about the technical details: Let’s take the Retina MacBook Pro (rMBP) as an example. The display is specified with a resolution of 2880 x 1800 pixels. That’s a lot of pixels on 15 inches. Some people are already complaining about Full HD resolutions on 15 inch screens (1920 x 1080 or often x 1280), and stating that they can’t read the text properly. So adding another 3.4 million pixels is quite a big step. But here’s the catch: when you start up an rMBP, you do not see tiny fonts, nor do you have huge screen estate: the displayed content is scaled up four times. That means the screen estate on an rMBP feels like 1440 x 900 pixels, rather than double the amount on each axis (this scaling can be changed, but for now let’s look at the default setting). That implies that 1 pixel of the perceived 1440 x 900 consists of 4 pixels.

retina ready

Taking that principle into web design leads to the following situation: rendering an image in the browser which is 250 x 250 pixels works as usual for non-HiDPI devices. The HiDPI devices do not scale their view down, so 1 pixel of the image does not take up 1 pixel on the screen, but it takes up 4 pixels. Therefore it does not use the full potential of the HiDPI screen, which the surrounding font and vector graphics, as well as the operating system do. That makes it look quite poor in comparison to the ultra-sharp neighborhood. When I turn off the little JavaScript code, which renders our website “retina ready” on such devices, the logo looks like that:

retina-logo-2

retina-logo-1

You don’t want that to happen.

How many people are surfing with HiDPI screens?

Unfortunately it’s hard to find out the exact numbers, as analytic tools don’t report them. But it is certainly a number which is growing rapidly. When you have a look at mobile traffic, which has grown 78% in the last year (from ~14% to ~24%), it’s obvious that it is increasing. Some websites have 30% mobile traffic and more. At the same time, more and more mobile devices come with high pixel density displays. And the trend is visibly moving towards ultrabooks and laptop computers.

The following graph shows the growth of the keyword “retina” on Google Trends.

 

(Out of curiosity we also added the term “HiDPI” to the graph, which you can see is not really relevant at the time of posting)

 

How to make Your Website Retina Ready?

This will be covered in more detail in a follow up post. For now, we’ll give you a brief overview of the two easiest methods.

1. Retina First Approach

Make your images double the size of how you’re planning to display them (e.g. 500 x 500 px instead of x 250 px), and scale them down via the img width and height in HTML. The obvious disadvantage is the higher file size and therefore longer loading time on non-HiDPI devices.

2. WordPress Plugin

If you’re dealing with a WordPress site, the community has you covered. The plugin WP Retina 2x is able to go through your media library and create retina sized versions of your images, as long as you have uploaded them large enough. A JavaScript file selects which image to use, depending on the device the user is browsing with.

Conclusion

If you’re planning a new website project at the moment, make sure to make it Retina ready from the beginning. If your project is already launched, you can still add the HiDPI support now, and we would highly recommend doing so. Having crystal clear images on your site makes it very appealing, and can give you an easy advantage over your competitors.
Let us know if you need any help!

About the author

Philipp Steinweber

Philipp Steinweber

Philipp is the founder of Metamonks and Omooni, and passionate about personal growth. On Soulful Hustle he open-sources the strategies and insights learned from his projects.

x