html - 图片在 Chrome 中看起来分辨率低且模糊

Question

我注意到我网站上的一些图片在 Chrome 中看起来分辨率低，而在 Mozilla 中看起来不错。

这里是截图

在 Chrome 中:

在 Mozilla 中:

我该怎么做才能解决这个问题？

我找到了类似的东西，但没有帮助

img {
     image-rendering: optimizeSpeed;             /*                     */
    image-rendering: -moz-crisp-edges;          /* Firefox             */
    image-rendering: -o-crisp-edges;            /* Opera               */
    image-rendering: -webkit-optimize-contrast; /* Chrome (and Safari) */
    image-rendering: optimize-contrast;         /* CSS3 Proposed       */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+                */
}

这是我添加图像渲染时的样子:像素化；

Answer 1

Chrome 似乎做了一些抗锯齿处理。因此，首先，它可能有助于将图片保存为所需的大小(当您不应用任何大小时它会正确显示，例如使用 CSS)。然后，根据CanIUse ，对于 Chrome，CSS 应该读取 image-rendering: pixelated; 而不是 image-rendering: -webkit-optimize-contrast; 注意:Safari 的值也发生了变化，MS 不再/在 Edge 中支持它。