如何防止 Chrome 中调整图像大小时模糊？

Question

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

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

在其他浏览器中不模糊，但在Chrome中，太模糊了。 我在 www.twitter.com 上看过，他们的新设计有很多调整大小的图像，不知何故，他们成功地清除了调整大小的图像中的模糊。我已经尝试过这些；

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

但不幸的是，这并不能解决问题。

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

正确的做法是什么？

Answer 1

你尝试过这个吗？ :)

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

Answer 2

您可以将 image-rendering 设置为

pixelated

，以保留原始的像素化形式。下面的代码在 Chrome（和 Opera）网络浏览器中也应该按预期工作。

img {
  image-rendering: pixelated;
}

根据文档：

• pixelated

  使用最近邻算法，将图像放大到大于或等于其原始尺寸的下一个整数倍，然后缩小到目标尺寸，如

  smooth

  所示。当放大到原始大小的整数倍时，这将具有与

  crisp-edges

  相同的效果。

Answer 3

我注意到，当您按一定比例调整图像大小时，Chrome 会做得更好。例如，如果将 375 像素图像的大小调整为 100，它会变得模糊，但如果将 200 大小调整为 100，效果会更好，因为它甚至是 50% 的缩放比例。

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

Answer 4

我刚刚在 WordPress 画廊中遇到了这个问题，其中有六个使用 WEBP 文件的图像。在 Chrome 等中，一张图像很清晰，其他图像稍微模糊，但在 Firefox 中还可以。我将这五个图像裁剪为清晰图像的精确尺寸（1200 x 650 像素），并用新裁剪的版本替换了图库中的“模糊”图像。现在都显示正常了。 有些作物的深度仅减少了 4 个像素。