1.直接加载2倍大小的图片。
假如要显示的图片大小为200px*300px，你准备的实际图片大小应该为400px*600px，并且使用以下代码控制即可：　　<img src="pic.png" height="200px" width="300px" />
这种方法就解决了Retina显示不清楚的问题，但是在普通屏幕下，这种图片要经过浏览器的压缩，在IE6和IE7上有十分差得显示效果，同时，两倍大小的图片势必会导致页面加载时间加长，用户体验下降，此时，我们可以通过Retina.js（http://retinajs.com/） 文件解决：
<img class="pic" src="pic.png" height="200px" width="300px"/>
<script type="text/javascript">
$(document).ready(function () {
if (window.devicePixelRatio > 1) {
var images = $("img.pic");
images.each(function(i) {
var x1 = $(this).attr('src');
var x2 = x1.replace(/(.*)(.w+)/, "$1@2x$2");
$(this).attr('src', x2);
});
}
});
</script>
2.Image-set控制
假如要显示的图片大小为200px*300px，你准备的图片应有两张：一张大小为200px*300px，命名为pic.png；另一张大小为400px*600px，命名为pic@2x.png（@2x是Retina图标的标准命名方式），然后使用以下css代码控制： logo {　　background: url(pic.png) 0 0 no-repeat;
background-image: -webkit-image-set(url(pic.png) 1x, url(pic@2x.png) 2x);
background-image: -moz-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -ms-image-set(url(pic.png) 1x,url(images/pic@2x.png) 2x);
background-image: -o-image-set(url(url(pic.png) 1x,url(images/pic@2x.png) 2x);
}
或者使用HTML代码控制亦可：
<img src="pic.png" srcset="pic@2x.png 2x" />
3.使用@media控制
实际是判断屏幕的像素比来取舍是否显示高分辨率图像，代码如下：　　@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min--moz-device-pixel-ratio: 1.5), / 注意这里的写法比较特殊 /
only screen and (-o-min-device-pixel-ratio: 3/2),
only screen and (min-device-pixel-ratio: 1.5) {
logo {　　background-image: url(pic@2x.png);
background-size: 100px auto;
}
}