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

时间:2016-03-27 20:19:58

标签: image resize png scale

我是一名视觉/ 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级,因为我被教导了。这有什么合理的理由吗?

很抱歉,如果答案很明显。我真的很好奇。提前致谢。

3 个答案:

答案 0 :(得分:1)

这是因为当您将图像的大小(在两个维度中)减半时,您实际上正好将4个像素组合成一个像素。但是,如果稍微缩小比例(例如0.7),则会有一个像素的一小部分进入一个像素(在每个维度中)。这意味着来自一个像素的数据最多使用4个像素而不是一个像素,从而导致模糊效果。

很抱歉,制作一个示例图像对我来说很难,但我希望你能得到这个概念。

答案 1 :(得分:1)

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

因此,例如在上面的图片中,它将是白色和橙色之间的东西?一个不太明亮的橙色。确定让合并的像素看起来像那样。当你到达一个角落时,可能会有更多的橙色,所以新的像素看起来会更加橙色,你明白了。

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

如果你不明白这一点,我理解,我有点切入......如果你需要更多的澄清评论:)

答案 2 :(得分:1)

发生的事情很大程度上取决于您用来缩小图像的软件。减少0.5和0.7之间存在重大差异。

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

如果缩小0.7,则进行分数采样。每个方向10个像素减少到7个。 在0.5采样中,您读取两个像素,读取两个像素。

在0.7采样中,您在每个方向上读取1.42857142857143像素。为此,您必须加权像素值。这将在绘图中产生模糊。