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