PNG图像在缩放时会变得模糊

Question

我是一名视觉/UI设计师，正在开发一个由另一位设计师设计的项目/产品。这位设计师提供了前端开发人员质量很好的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比例工作，因为我被教导如此。这背后是否有任何逻辑原因呢？

如果答案显而易见，我很抱歉。我真的很想知道。谢谢。

- Milla Nascimento

---

你使用什么程序/工具来扩展它们？ - Mark Setchell

@MarkSetchell 前端开发人员正在使用HTML/CSS对它们进行缩放。我在这个问题上得到了一些答案（请参见下面的答案），它们非常有帮助。 - Milla Nascimento

好问题，但我认为这不是正确的网站。我建议将此问题迁移到http://computergraphics.stackexchange.com。 - Evorlor

Milla，你在下面发布了几个“谢谢”的评论，但显然没有给有帮助的答案点赞。后者是SO更喜欢的。 - isherwood

Answer 1

当你将图像的大小减半（在两个维度上），实际上是将4个像素精确地合并成一个像素。但是，当你使用略微偏离比例（例如0.7）时，一个像素及其一部分会进入一个像素中（在每个维度上）。这意味着一个像素的数据被用于最多4个像素，而不是一个像素，从而导致模糊效果。

很抱歉，我很难为您制作示例图片，但我希望您能理解这个概念。

- Roshan Bhumbra

Answer 2

大部分情况下，图像缩小的效果取决于所使用的软件。将图像缩小0.5和0.7存在较大差异。

如果你将图像缩小0.5，那么四个像素会合并成一个像素。

如果你将图像缩小0.7，则进行的是分数采样。每个方向上的10个像素被缩小为7个像素。在0.5采样中，你需要跨越两个像素读取，向下也是如此。

在0.7采样中，每个方向上需要读取1.42857142857143个像素。为了达到这个目的，你需要对像素值进行加权处理。这会导致绘画中出现模糊的效果。

- user3344003

Answer 3

我觉得这与插值有关，当你调整图像大小时，无法知道两个被合并的像素之间应该是什么。计算机试图通过查看周围的像素并结合数值来猜测新像素的样子。

举个例子，在上面的图片中（问题中的那张），它会问：“白色和橙色之间是什么？”答案是一个稍微暗一点的橙色。好的，让合并后的像素看起来像那样。当你到达一个角落时，可能会有更多的橙色，所以新的像素看起来会更橙色，你明白我的意思吧。

现在，当你按0.5的比例缩放时，计算机会以恒定的速率查看像素并将它们合并在一起。我的意思是，如果你看着一张图像并试图将其分成两半，你总是会合并4个像素，但是如果你按0.7的比例缩放，你会合并不规则数量的像素，导致图像在缩放过程中像素的浓度不同，从而产生模糊的图像。

如果你不理解，我理解，我有点离题了...如果你需要更多解释，请在下面评论 :)

- user3797758

Answer 4

将.img-crisp类添加到图像中：

.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) */
}

image-rendering CSS属性设置图像缩放算法。该属性适用于元素本身，应用于其其他属性中设置的任何图像以及其后代。

来源.

- Steve