LESS mixin to make optimization for Retina and high-dpi screens easier.

less-retina-mixin.less

// media queries are escaped to prevent potential LESS rendering errors
// adapted from http://37signals.com/svn/posts/3271-easy-retina-ready-images-using-scss
@mediaRetina: ~"(min-resolution: 124dpi), (-webkit-min-device-pixel-ratio: 1.3), (min--moz-device-pixel-ratio: 1.3), (-o-min-device-pixel-ratio: 4/3), (min-device-pixel-ratio: 1.3), (min-resolution: 1.3dppx)";

.image-2x(@image, @width, @height) {
    @media @mediaRetina {
        background-image: url('@{image}');
        background-size: @width @height;
    }
}