有的时候，图片加载之后，在页面里显示很模糊，因为经过了网页压缩导致，解决办法如下：
1、Retina.js
我们可以通过下载Retina.js文件解决http://retinajs.com/，引入到页面中，准备两张图片，一张大小为200px * 300px，命名为shenpi.png；另一张大小为400px * 600px，命名为shenpi@2x.png（@2x是Retina图标的标准命名方式）
然后再两个不同大小屏幕中控制台中显示的结果如下：
image.png
image.png
这样解决了在不同大写浏览器中图片模糊的问题
2 、Image-set
css中
#logo {
background-image: url(../imgs/daka_icon.png);
background-repeat: no-repeat;
background-image: -webkit-image-set(url(../imgs/daka_icon.png) 1x, url(../imgs/daka_icon@2x.png) 2x);
background-image: -moz-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/daka_iconc@2x.png) 2x);
background-image: -ms-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/daka_icon@2x.png) 2x);
background-image: -o-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/daka_icon@2x.png) 2x);
- 在不支持image-set的浏览器下，他会支持background-image图像
- 支持image-set**：普通显屏下，会选择image-set中的@1x背景图像；
- Retina屏幕下的image-set**：浏览器会选择image-set中的@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;
}
}
