如何解决图片显示不清楚

有的时候，图片加载之后，在页面里显示很模糊，因为经过了网页压缩导致，解决办法如下：

1、Retina.js

我们可以通过下载Retina.js文件解决http://retinajs.com/，引入到页面中，准备两张图片，一张大小为200px * 300px，命名为shenpi.png；另一张大小为400px * 600px，命名为[email protected]（@2x是Retina图标的标准命名方式）

![](shenpi.png)

然后再两个不同大小屏幕中控制台中显示的结果如下：

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/[email protected]) 2x);
    background-image: -moz-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/[email protected]) 2x);
    background-image: -ms-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/[email protected]) 2x);
    background-image: -o-image-set(url(../imgs/daka_icon.png) 1x,url(../imgs/[email protected]) 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([email protected]);
       background-size: 100px auto;
   }
}