A Sass media query mixin that captures almost all high DPI aware devices.

high-dpi-media.scss

/* ----------------------------------------------------------------------- */
/*                                                                         */
/* Improved upon a mixin from 37signals and combined                       */
/* with these numbers from marc.                                           */
/*                                                                         */
/* 37signals-version:                                                      */
/* http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss */
/*                                                                         */
/*                                                 @kimroen                */
/*                                                                         */
/* A media query that captures:                                            */
/*                                                                         */
/* - Retina iOS devices                                                    */
/* - Retina Macs running Safari                                            */
/* - High DPI Windows PCs running IE 8 and above                           */
/* - Low DPI Windows PCs with IE zoomed in                                 */
/* - Android hdpi devices and above                                        */
/* - Android tvdpi devices, including Google Nexus 7                       */
/* - Chrome running on high DPI Macs and PCs                               */
/* - Opera running on high DPI Macs, PCs and mobile devices                */
/*                                                                         */
/* Please note that that this code assumes you'll swap a                   */
/* 2× version of your images. If you'd like to supply                      */
/* finer increments, other thresholds might be appropriate.                */
/*                                                                         */
/*                                  @marcedwards from @bjango              */
/*                                                                         */
/* ----------------------------------------------------------------------- */

@mixin image-2x($image, $width: auto, $height: $width) {
  @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
         only screen and (-o-min-device-pixel-ratio: 13/10),
         only screen and (min-resolution: 120dpi) {
    background-image: url($image);
    @if $width != auto {
      background-size: $width $height;
    }
  }
}