Optimizing CSS for Retina screens

Ribbon looks blurred on a retina screenFor my latest RWD project I’ve (finally) taken Retina screens into account. As it involved a good bit of trial & error I thought it might be useful to share this here.

What does retina mean?

In case you’re not familiar with the concept of retina screens: Apple has introduced so called retina screens with the latest iPhone, the ‘NEW’ iPad and I believe their latest MacBooks as well. What it does is it doubles the number of pixels and as a consequence, images are doubled in size (automatically) to be displayed at the same size. But because the image has doubled in size, the quality has decreased and now look blurred and out of focus. So to fix this, images should be double the size and then displayed again at half the size (you’re still with me?).

The Media Query

The media-query for addressing Retina screens is:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    /* your retina styles go here */
 }

Now you need to use images that have double the size and then resize them again to their original size in css:

.image {
     width: 
     height:
     /* the width and height should be similar to the original image, so half the size of your retina image */

     background-image: url(retina-image.png); background-size: 300px 200px; 
     /* half the dimensions of the retina image here */ 

     background-position: -100px -75px;
     /* when you use a sprite, also half the coordinates of your full size retina image. */
 }

That’s it. I’ve tried CSS transform techniques as well – transform:scale(x) -, but this method has proven most predictable.