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