缩放后 PNG 图像看起来很模糊

Question

我是一名 visual/UI 设计师，正在开发由另一位设计师设计的 project/product。这位设计师为前端开发人员提供了高质量的PNG图标，但是当前端开发人员将图像比例设置为0.7时，它们看起来很模糊。

我注意到如果我们将图像的比例设置为 0.5，它们看起来一点也不模糊：

0.7: [1]: http://i.stack.imgur.com/jQNYG.png

0.5: [2]: http://i.stack.imgur.com/hBShu.png

有人知道为什么会这样吗？

我个人总是使用 0.5 比例，因为我是这样被教导的。这有什么合乎逻辑的原因吗？

抱歉，如果答案显而易见。我真的很好奇。提前致谢。

Answer 1

这是因为当您将图像的大小（在两个维度上）减半时，实际上是将 4 个像素合二为一。但是，当您稍微偏离比例（例如 0.7）时，您会有一个像素和一小部分像素进入一个像素（在每个维度中）。这意味着来自一个像素的数据最多被用于 4 个像素，而不是一个，从而导致模糊效果。

抱歉，制作示例图像对我来说非常困难，但我希望你能理解这个概念。

Answer 2

我认为这与插值有关，当您调整图像大小时，无法知道本质上正在合并的两个像素之间应该有什么。计算机试图做的是通过查看周围的像素并结合这些值来猜测新像素应该是什么样子。

例如，在上图中，白色和橙色之间的颜色会消失吗？不太亮的橙色好的，让合并后的像素看起来像那样。当你到达一个角落时，可能会有更多橙色，所以新像素看起来更橙色，你明白了。

现在，当您按 0.5 缩放时，计算机会查看像素并以恒定速率将所有像素合并在一起。我的意思是，如果您查看图像并尝试将其分成两半，您总是会将 4 个像素合并在一起，但是如果您按 0.7 缩放，则合并不规则数量的像素会导致图像缩放时像素的浓度不同这会导致图像模糊。

如果您不明白这一点，我明白，我有点离题了....如果您需要更多说明，请在下面评论:)

Answer 3

发生的情况在很大程度上取决于您用来缩小图像的软件。减少 0.5 和减少 0.7 之间有很大的不同。

如果缩小 0.5，则将 4 个像素合并为一个。

如果你缩小 0.7，你就是在进行分数采样。每个方向上的 10 个像素减少到 7 个。在 0.5 采样中，您横向读取两个像素，向下读取两个像素。

在 0.7 采样中，您在每个方向上读取了 1.42857142857143 个像素。为此，您必须对像素值进行加权。这会在绘图中造成模糊。

Answer 4

给图片添加一个.img-crispclass：

.img-crisp {
  image-rendering: -moz-crisp-edges; /* Firefox */
  image-rendering: -o-crisp-edges; /* Opera */
  image-rendering: -webkit-optimize-contrast; /* Webkit (non-standard naming) */
  image-rendering: crisp-edges;
  -ms-interpolation-mode: nearest-neighbor; /* IE (non-standard property) */
}

The image-rendering CSS property sets an image scaling algorithm. The property applies to an element itself, to any images set in its other properties, and to its descendants.

Source.

缩放后 PNG 图像看起来很模糊

PNG images look blurry when scaled

png

resize

image

scale