移动端图片总是有点模糊（马赛克化图片）

在移动端img指向一个图片后，ui总是说有点模糊，但是已经用了三倍图了。放到pc上感觉挺清晰的，h5上是有一点模糊。

解决

image-rendering：pixelated

image-rendering属性提示浏览器如何在执行图像处理时进行速度与质量的折衷

image-rendering 属性向浏览器提供了一个提示，即在图片处理时，如何进行速度 vs 质量之间的权衡
作为一个表现属性，它也可以作为一个属性直接在一个CSS样式表中使用

• auto——表示用户代理应该进行适当的权衡来平衡速度和质量，但是质量应该比速度更重要。

• optimizeSpeed——表示用户代理应该强调渲染速度而不是质量。

• optimizeQuality——表示用户代理应该重视质量而不是渲染速度。

image-rendering: pixelated比较有意思，可以将一张低精度图像马赛克化
直接给原图设置image-rendering: pixelated只会让图片变得更加有锯齿感，而不会直接产生马赛克的效果。

参考：https://new.qq.com/rain/a/20220415a054wl00（实现图片马赛克）