页面图片显示不清晰

在页面中嵌入图片，UI 设计小姐姐总是反馈在她们的电脑上不清晰，呃…你看，在我的电脑很清晰啊。

#!^😅……

好吧，既然说服不了设计小姐姐，那就得想想办法怎么去解决。

出现这个问题，可能是如下几种原因。

1. 图片本身分辨率不行
2. 对图片进行了缩放或没有按照图片比例缩放

第一种原因

第一种原因很好处理，换一个正常分辨率的图片就好了。

第二种原因

如果是第二种原因，可以尽量减少图片的缩放。

如果不得不缩放，首先要保证图片是等比缩放的。这个很好理解，没有按照比例缩放的话，首先图片是变形的，那么势必会导致图片不清晰的结果，可以通过 css 来控制等比缩放。

img {
  /* 如果宽度不想设置为100%，你也可以设置为具体的宽度，高度设置为auto它会自动自适应 */
  width: 100%;
  height: auto;
}

还有一点，可以控制图片的缩放形式。

比如，使用 srcset 或者 media query 来控制不同屏幕的分辨率来显示不同分辨率的图片，即选择最合适的图片用在不同的屏幕上，可以减少图片糊的可能性。

<img src="xxxx.png" alt="xxx" srcset="xxx@1x.png 1x, xxx@2x.png 2x" />

需要注意的是，尽量减少非整数倍的图片缩放，比如图片缩放 1.2 倍，可能会出现糊的问题，可以将其替换成能够整数倍缩放的图片。

如果，还是不能解决问题，可以尝试使用 image-rendering 这个属性，这个属性用于设置图像缩放算法，它的浏览器支持情况如下所示。

使用方式如下

<img src="xxxxx.png" alt="xxx" />

<style>
  img {
    image-rendering: -webkit-optimize-contrast;
  }
</style>

使用了这些优化手段，图片是否清晰了一点呢？