How To Set Retina Graphics For Your Website

Posted on by

A couple of days ago, Ed picked up his new MacBook Pro with retina display.

One of the first things we got to see was how kickfolio.com looked @2x – and thankfully it’s turned out very well!

When we originally launched Kickfolio, we took some time to implement iPad retina-enabled graphics and apparently the same technique works on the MacBook. In short, on retina devices, we sub-in images that are double the resolution so they look crisp, using a CSS selector.

Now that the new MacBook sports a retina display, we suspect this technique will become common practice on modern web sites.

Here’s how you achieve it…

In your HTML, create a DIV like so:

<div class="ninjas-image"></div>

And in your CSS, add:

.ninjas-image {
  background-image: image-url('ninja-devices.png');
  width: 410px;
  height: 450px;
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and    (-moz-min-device-pixel-ratio: 2),
       only screen and      (-o-min-device-pixel-ratio: 2),
       only screen and         (min-device-pixel-ratio: 2) {
  .ninjas-image {
    background-image: image-url('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

The magic here is in the CSS selector. We have a double-sized image (ninja-devices@2x.png) that we sub-in when the device reports a ‘device pixel ratio’ of 2 or more. Doing it this way allows you to save on bandwidth by delivering the original, smaller image to non-retina devices, and of course it looks great on the new MacBook.

That’s it!

You can see the results at http://kickfolio.com

Thanks for reading and good luck with your websites. Cheers!

  • Pingback: So optimierst du Grafiken für das Retina-Display des neuen MacBook Pro » t3n News

  • http://damovi.de Darius

    That’s only half the story. Unless I’m very much mistaken you have to add the non retina graphics in separate media queries, too. The reason this can be done is that a retina device will download both graphics! With a non retina media query it should download the right version.

    Try that changes:

    .ninjas-image {
    width: 410px; height: 450px;
    }
    @media only screen and (-webkit-max-device-pixel-ratio: 1){
    background-image: image-url(‘ninja-devices.png’);
    }

    • http://twitter.com/chrisnolet Chris

      Hi Darius,

      On retina devices, the original code will in fact only download the @2x image, as required, and doesn’t waste any bandwidth. You can check this with FireBug or Inspector on your favourite browser, on a retina MacBook Pro. (The second background-image overrides the first on these devices).

      Thanks for your comments and attention to detail!

      • http://damovi.de Darius

        Thanks, good to know. Making the web faster and better!

  • http://www.figurbetont.de Bernd

    Hi,

    Does that run with iPad3 or similar?

    • http://twitter.com/chrisnolet Chris

      Hi Bernd. The same technique also works on the iPad 3 and iPhone 4+, which is how we discovered it! For those devices though, you probably want to look at implementing a responsive design as well: either via via Bootstrap (twitter.github.com/bootstrap) or by using your own CSS selectors (refer: http://mislav.uniqpath.com/2010/04/targeted-css/). Thanks :)

  • Bosbolo

    Your title ist a bit confusing, because your solution only work for CSS backgroundimages, not for inline HTML images.

    • http://twitter.com/chrisnolet Chris

      Hi Basbolo,

      Point taken. This method will allow you to insert inline images if you use <span> in lieu of <div>. You could also use the same CSS selectors to show and hide alternate <img> tags:

      <img src="image.png" class="non-retina"/>
<img src="image@2x.png" class="retina"/>

<style>
img.retina {
  display: none;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2),
       only screen and    (-moz-min-device-pixel-ratio: 2),
       only screen and      (-o-min-device-pixel-ratio: 2),
       only screen and         (min-device-pixel-ratio: 2) {
  img.retina {
    display: inline;
  }
  img.non-retina {
    display: none;
  }
}
</style>
  • care

    Thanks for this, we are using this on the new version of our website!

  • http://www.facebook.com/RobMarcVanLinda Rob van Linda

    But what do you do when there are diffrent backhground images for different screen resolutions (portrait, landscape, iphone and ipad)?