What you need to know about Retina Display

[English]August 29, 2012

Apple recently announced their high resolution display called Retina Display. How is this going to affect web development? What changes should we make?

Apple recently announced the patent for Retina Display, which is about a high resolution display system that is going to integrate into their hardware. The most recent one was the Retina Macbook Pro, that has the double amount of density on their screens.

As web developers, we need to provide support to the support for these. But first, what exactly are we talking about?

What is Retina Display?

Basically, Retina Display is the increase to twice the number of pixels on the screen (physical pixels).

10 pixels in CSS, on a standard monitor, corresponds exactly to 10 pixels on the screen, but unlike on a Retina monitor, 10 pixels would correspond to 20 pixels; this to maintain a correct proportion.

Following the previous principle, 10 pixels in a bitmap image, equal to twice in a screen with Retina.

How to optimze for Retina Display?

Since the proportion of each pixel is doubled for the adaptation of the real view of the monitor, it must maintain a correct resolution for the sample of images.

The javascript function window.devicePixelRatio returns the direct proportion of the radius of the pixels. When this number returns 2 or 1.5, it corresponds to high resolution screens such as Retina Display or other products of other brands.

HTML Solution

To maintain a normal proportion in, for example, a logo image, we can use the following code:

<img src="logo.png" width="300" height="300" alt="Logo" />

On which the width and length of the element is specified so that the browser is able to calculate the images and have space when it is loaded, so that our original image of 600x600 pixels is seen in a normal resolution in 300x300 and in a display Retina, in 600x600.

It is by this principle, I repeat, that our images must have twice the resolution to be shown in the retina, but would not this encourage the loading of, for example, a gallery of images? That is why we must seek different solutions to the new problem we are facing, in order to offer a better solution to our users.

Javascript Solution

A more immediate and less manual solution is to cut our assets in half and then attribute that width to each our images for the correct view on a normal display. This can be achieved with jQuery:

$(window).load(function() {
  var images = $('img')
  images.each(function(i) {
    $(this).width($(this).width() / 2)
  })
})

Thus, for displays with Retina, the images will be seen correctly.

However, another method that exists is that you have assets of low and high resolution (2x) and that at the end of the name of these last additions @2x. The following script will first measure the radius of pixels that the screen has, if it is greater than 1, the function will add the string @2x to the end of the file name to load the higher resolution photos.

$(document).ready(function() {
  if (window.devicePixelRatio > 1) {
    var lowresImages = $('img')

    images.each(function(i) {
      var lowres = $(this).attr('src')
      var highres = lowres.replace('.', '@2x.')
      $(this).attr('src', highres)
    })
  }
})

This solution is basic, like what the Retina.js plugin does, which has a wider support for this solution in javascript.

CSS Solution

The solution in CSS is through the use of media queries. If you have images in the form of a background style, this solution will interest you:

.logo {
  background-image: url(logo.png);
  background-size: 300px 300px;
  height: 300px;
  width: 300px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (-moz-min-device-pixel-ratio: 1.5),
  only screen and (-o-min-device-pixel-ratio: 3/2),
  only screen and (min-device-pixel-ratio: 1.5) {
  .logo {
    background-image: url(logo@2x.png);
  }
}

The radius of pixels to 1.5 is specified to be able to cover all the large resolutions that appeared before Retina Display.