图像随机模糊答案

【问题标题】：images are randomly blurry图像随机模糊
【发布时间】：2015-02-19 18:02:17
【问题描述】：

我不明白为什么有些图像在不同的浏览器尺寸下会变得模糊。看看this sample site：

顶部的菜单按钮和其他按钮在悬停时都会缩小一点。更改浏览器大小几次，发现其中一些是模糊的。有些在悬停时实际上变得更清晰，有些变得更模糊。

我不知道如何解决这个问题。它们都以相同的方式压缩，都具有相同的分辨率。是否有特定的尺寸需要它们在缩放时看起来更好？

【问题讨论】：

【解决方案1】：

您提供的图片文件方式太大，导致浏览器花时间将它们重新缩放到图片标签中指定的大小。这会导致您看到的两次渲染。

例如，icon_profile2.png 的尺寸为 2055x1712。

在您喜欢的图像编辑器中将图像调整为所需大小，并使用网站上的缩小版本。

【讨论】：

我不得不开始将它们放大，因为它们最终变得太模糊了。大而缩小的它们在手机上看起来非常好，而不是非常模糊。如果普遍支持，我会使用 svg 。 :-/
移动用户尤其不喜欢大图像，因为移动带宽通常更慢且更昂贵。以您想要显示的实际大小重新创建图像。如果您当时对模糊图像有疑问，请提出一个新问题。相信我，一个像样的图像编辑器在缩小图像方面会比浏览器做得更好。