Question

如果使用调整图像大小，图像非常模糊，例如显示尺寸调整大小的小图像，例如;

<img src="largeimage.jpg" width=30 height=30 \>

它在其他浏览器中并不模糊，但在Chrome中，它如此模糊。我在www.twitter.com上看过，他们的新设计有很多调整大小的图像，不知何故，他们设法清除了调整大小的图像中的模糊。我试过这些;

image-rendering: crisp-edges;
image-rendering: pixelated;

但不幸的是，它并没有解决问题。

以下是对比。在左侧，您可以看到它与右侧相比非常模糊：

这样做的正确方法是什么？

Answer 1

我注意到当您按特定百分比调整图片大小时，Chrome可以做得更好。例如，如果您将375px图像的大小调整为100，它会变得模糊，但如果您调整大小为200到100，则会更好，因为它甚至可以达到50％的比例。

如果没有可编辑的测试环境，我不确定这是否会为您解决，但值得一试。

Answer 2

你试过这个吗？：）

filter: blur(0);
-webkit-filter: blur(0);
transform: translateZ(0);
-webkit-transform: translateZ(0);