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