13

My website images look blurry for users with retina displays. (For example, on the Retina MacBook Pro).

How do I serve high-resolution images to visitors with retina displays, but standard-sized images to everyone else, while keeping the image the same apparent size?

Chris Nolet
  • 8,714
  • 7
  • 67
  • 92

2 Answers2

11

In your HTML, create a <div> like so:

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

And in your CSS, add:

.ninjas-image {
  background-image: url('ninja-devices.png');
  width: 410px;
  height: 450px;
}

@media (-webkit-min-device-pixel-ratio: 1.5), (min-resolution: 144dpi) {
  .ninjas-image {
    background-image: url('ninja-devices@2x.png');
    background-size: 410px 450px;
  }
}

The magic here is in the CSS @media query. We have a double-sized image (ninja-devices@2x.png) that we sub-in when the device reports a ‘device pixel ratio’ of 1.5 (144 dpi) 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 retina devices.

Note:

This answer was updated in 2016 to reflect best-practice. min-device-pixel-ratio did not make it in to the standard. Instead, min-resolution was added to the standard, but desktop and mobile Safari don't support it at the time of writing, (thus the -webkit-min-device-pixel-ratio fallback). You can check the latest information at: http://caniuse.com/#feat=css-media-resolution.

Chris Nolet
  • 8,714
  • 7
  • 67
  • 92
  • 1
    You may wish to explain how this code works: what's the purpose of the media query and `background-size` declarations, and so on. (You don't need `-webkit-background-size` anymore, by the way...) – BoltClock Jun 16 '12 at 06:54
  • @BoltClock Have added a little more explanation and removed -webkit-background-size as suggested. Thanks! – Chris Nolet Jun 17 '12 at 03:36
  • Is it only webkit specific or are there other vedor prefixes? I suspect there is also -moz – mastazi Jun 17 '12 at 04:30
  • @mastazi Have added in the other vendor prefixes. Thanks! – Chris Nolet Jun 17 '12 at 05:40
2

We've been using the following to handle multiple cases where the ratio is 1.5 or higher - this takes more devices and browsers into account:

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (-o-min-device-pixel-ratio: 3/2),
    only screen and (min--moz-device-pixel-ratio: 1.5),
    only screen and (min-device-pixel-ratio: 1.5) {

We have our entire site Retina enabled: http://www.embraceware.com/

psubsee2003
  • 8,563
  • 8
  • 61
  • 79
Jerry Brace
  • 66
  • 2
  • @ChrisNolet, if you want to revert to the original, you should do a rollback and not try to re-edit. – psubsee2003 Mar 22 '13 at 19:45
  • Sorry @psubsee2003 - not sure how to do that! I don't see any rollback links on this page: http://stackoverflow.com/posts/11063689/revisions. Can you lend a helping hand? Thanks. – Chris Nolet Mar 23 '13 at 22:19
  • 1
    @ChrisNolet my bad... I forgot you don't get the ability to rollback until you have 2K rep. I will roll it back for you. – psubsee2003 Mar 24 '13 at 09:55