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