CSS_Retina

http://www.sitepoint.com/css-techniques-for-retina-displays/


// via JS
$(document).ready(function(){
    if (window.devicePixelRatio > 1) {
        var lowresImages = $('img');

        images.each(function(i) {
            var lowres = $(this).attr('src');
            var highres = lowres.replace(".", "@2x.");
            $(this).attr('src', highres);

        });
    }
});


// vanilla CSS

/* for low resolution display */
.image {
    background-image: url(/path/to/my/lowreslogo.png);
    background-size: 200px 300px;
    height: 300px;
    width: 200px;
}

/* for high resolution display */
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),

only screen and (min-device-pixel-ratio: 2) {
.image {
    background: url(/path/to/my/highreslogo.png) no-repeat;
    background-size: 200px 400px;
 /* rest of your styles... */
 }
}