在 Chrome 中模糊缩小的图像答案

【问题标题】：Blurry downscaled images in Chrome在 Chrome 中模糊缩小的图像
【发布时间】：2016-10-20 18:27:58
【问题描述】：

我正在使用 gravatars，而且我经常使用 css 缩小它们，而且我相信 Google Chrome 直到最近才正常使用（我可能错了，不确定问题到底是什么时候开始出现的）但是现在，图像缩小时会变得模糊，而且这种情况只发生在 Chrome 中，FF 的缩小效果很好。我尝试使用image-rendering，但它并没有解决问题。谁能给我一个提示最好的方法是什么？

这个例子可以在here找到，用Chrome打开，然后用FF，Chrome应该比FF更模糊。

谢谢

【问题讨论】：

superuser.com/questions/530317/… 很好地概括了这个问题。
@MathiasW 这是一个不同的问题，我没有在这里放大任何东西。只需在 FF 和 chrome 中打开该链接（无需放大），然后查看 chrome 中的图像模糊。
这个问题似乎回到了 2017-05-10，我很确定图像以前没有模糊，但目前在 Chrome 桌面上它们是模糊的，答案 webkit 设置解决了这个问题（和Firefox 上的图像很好）
很高兴看到您的完整代码。例如，“image-rendering 不起作用”如果我们不知道您使用的值（尤其是因为它已用于已接受的答案中），那么它并没有多大帮助
在我的情况下，问题在于图像本身，因为它的高度很奇怪。

标签： html css google-chrome firefox gravatar

【解决方案1】：

我在 Mac 上发现了完全相同的问题：Firefox 缩小图像的比例非常好，而 Chrome 让它看起来很模糊，这很糟糕。我不在乎渲染时间或速度，我需要徽标看起来不错！

我发现以下 CSS 规则修复了 Mac 版 Chrome

image-rendering: -webkit-optimize-contrast;

【讨论】：

拯救了我的一天 - 也适用于背景图像。奇怪的是，在没有这条规则的情况下，Chrome 在缩小 PNG 方面确实做得很糟糕。
当心：这会导致我的图像在 Safari 中出现锯齿状/像素化。
这不适用于 Mac 版 Chrome 64.0.3282.186。
@Badger 你可以试试image-rendering: pixelated;
在 2020 年仍然是一个问题，这个答案仍然对我有帮助（在 Chrome 83 上）

【解决方案2】：

我发现用过的transform: translateZ(0); 是工作。

类似问题：https://stackoverflow.com/questions/39347200

【讨论】：

您能否提供信息为什么这解决了问题的问题？
经过基于 Chromium 的测试（Chrome、Edge 和 Brave 测试）。根据这篇文章，它是通过3D硬件加速/GPU进行渲染，可能会导致CSS动画出现问题，所以最好谨慎使用。 blog.teamtreehouse.com/…
在 Chrome 81 之前（包括 Chrome 81 在内）都像魅力一样工作。似乎不再适用于 82 和 83（开发）。

【解决方案3】：

似乎transform: translateZ(0); 不再起作用了。
我发现唯一有影响的属性是 image-rendering: -webkit-optimize-contrast; （注意：这对 iOS safari 有很大不同的影响，它会使图像非常像素化，所以你只想启用它在镀铬和边缘）

这是使用此图像的比较：<img src="https://i.stack.imgur.com/acaio.jpg" style="width: 244px; height: 244px;">（在 Windows 10 上）以及标志上文字的特写：我认为 firefox 的渲染要好得多，但优化对比度确实有帮助。

【讨论】：

2021 年会出现这个问题，这让我大吃一惊

【解决方案4】：

更新

我没有意识到使用2x 后的图像大小与目标大小匹配，并且浏览器没有缩小。仅当您可以为图像使用固定大小的容器时，此解决方案才有效。

tl;博士

设置图像比例，Chrome 会正确缩小比例。在 Chrome 84 中测试。

重要的部分是使用srcset，最后加上2x。

<img srcset="image-2x.png 2x" alt="alt">

完整答案

我试过image-rendering: -webkit-optimize-contrast。它改进了 Chrome 中的渲染图像，但也给了我在 Safari 中看起来很糟糕的图像版本。

起初，我需要缩小图像，因为 Retina 显示器仍然需要 2 倍版本的图像（否则放大图像可能看起来模糊）。所以我决定创建两个版本（1x 和 2x）。

添加两者后，我发现如果我只使用原始的 2x 图像，但使用 srcset 中指定的 2x，那么图像将不再呈现模糊。

【讨论】：

这实际上是正确的方法，可惜你的答案被否决了¯_(ツ)_/¯。谢谢！ developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/…
这对我有用，而不是上述答案中的“图像渲染”。对此投了赞成票，因为不知道为什么这被否决了。
在 2021 年，这真的需要被接受为这个问题的正确答案。

【解决方案5】：

在 Windows 的 Chrome 中使用 will-change: transform;，在 Mac 中使用 image-rendering: -webkit-optimize-contrast;。

【讨论】：

UPD：不要在包含大量图像的页面上使用will-change: transform;。此功能使用 GPU 渲染图像，因此可能会降低浏览器的速度。

【解决方案6】：

Pastullo's answer 使用 image-rendering 完全解决了 Chrome 上的图像模糊问题，但图像在 Safari 上被像素化。这种媒体查询组合对我有用，可以在 Chrome 29+ 上设置属性并在 Safari 11+ 上取消设置：

@media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
  img {
    image-rendering: -webkit-optimize-contrast !important;
  }
}

/* Unset for Safari 11+ */
@media not all and (min-resolution:.001dpcm)
{ @supports (-webkit-appearance:none) and (stroke-color:transparent) {
  img {
    image-rendering: unset !important;
  }
}}

【讨论】：

【解决方案7】：

我建议另一首曲目，因为我处于相同的情况：图像在 chrome 下略微模糊，但在 firefox 下无可挑剔。 Ctrl + "0" 解决了这个问题。有一天我不得不使用缩放（Ctrl + "+" 或 "-"）并没有完全重置它...

【讨论】：

【解决方案8】：

我可以完成这个线程。

我发现了什么可以被视为错误（或者它可能是一个特性）。

如果您使用 CSS 将大方形位图图像（例如 500 像素 x 500 像素 JPEG）中的徽标缩小到 63 像素 x 63 像素正方形，则结果在 Chrome 版本 97.0.4692.99 或我的任何基于 WebKit 的浏览器中非常模糊计算机。（Opera，Edge）但不是 Firefox。

改成64px x 64px，一下子效果更好了。

我认为 WebKit 认为小尺寸图像不重要，因此可以使用不同的、更快但模糊的算法进行缩放。

如果您将网站上的徽标缩小到 63 像素或 60 像素，请考虑将它们放大一点。在您的检查器中测试以验证渲染是否令人满意。

不客气！

【讨论】：

【解决方案9】：

我发现解决此问题的最佳方法是仅使用 svg。另一种选择是使用 css 媒体查询来加载自适应图像大小。

【讨论】：

对于很多图像，这不是一个选项。此外，它们没有完全支持（请参阅 IE 说明）：caniuse.com/#feat=svg
甚至连微软都不想*你再关心这个了。 *) zdnet.com/article/…
不知道为什么这个答案的评分如此之低。这实际上是最优化的解决方案。大多数现代设计工具现在支持 svg 导出任何资产
2021 年获批。点赞这个人。