Bilder optimieren für Retina Displays

gefunden hier: http://blog.kickfolio.com/2012/06/15/retina/
Beispiel für Bilder  @2x für höhere  DPI-Geräte – ‘device pixel ratio’ of 2 or more.

 

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></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!