CSS Image Replacement for High-DPI Retina Display

CSS Image Replacement

/* for low resolution display */

.image {
    background-image: url(logo.png);
    background-size: 250px 90px;
    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(logo@2x.png) no-repeat;
    background-size: 250px 90px;
}
}

JavaScript Image Replacement

var isRetina = (
	window.devicePixelRatio > 1 ||
	(window.matchMedia && window.matchMedia('(-webkit-min-device-pixel-ratio: 1.5), (-moz-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)').matches)
);

JavaScript to replace all the images with double sized image

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);
        });
}