Image 图像随机模糊

我不明白为什么有些图像在不同的浏览器大小下变得模糊。看看：

当鼠标悬停在上方时，顶部的菜单按钮和其他按钮都会收缩一点。将浏览器大小更改几次，可以看到其中一些浏览器模糊。有些在空中盘旋时会变得更清晰，有些则会变得更模糊

---

我想不出怎么解决这个问题。它们都是以相同的方式压缩的，都围绕着相同的分辨率。是否有一个特定的大小，它们需要在缩放时看起来更好？

您提供的图像文件太大，导致浏览器花费时间将其重新缩放到图像标记中指定的大小。这将导致您看到的两次渲染

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

---

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

该“示例站点”已损坏（HTTP 500），请重试。有趣的是，在Chrome上，它们会随着变化而变得矮胖（最近的邻居可能会调整大小），然后在一两秒钟后变得尖锐。很明显，浏览器采用的调整大小算法让你手忙脚乱，你无法控制。我不得不把它们做大，因为它们太模糊了。它们体积大，尺寸小，在手机上看起来很不错，而不是很模糊。如果svg得到普遍支持，我会使用它-/移动用户尤其不喜欢大型图像，因为移动带宽通常较慢且更昂贵。按您希望显示的实际大小重新创建图像。如果你在这一点上有模糊图像的问题，问一个新问题。相信我，一个像样的图像编辑器在缩小图像比例方面要比浏览器做得好得多。