使用不止一次时图像质量下降

Question

在我的html页面中，我将图像包含为

<img src="http://i44.tinypic.com/w2o9kh.png" border="0" alt="Image by TinyPic">

我通过

从外部css设置样式

img {width:2em;height:2em; }

但是我注意到，当在页面中多次使用相同的图像时，图像质量会下降。 比较firefox中的http://jsfiddle.net/aJ333/50/和http://jsfiddle.net/zxgQr/。第一个笑脸的质量更差。

有关为何会发生这种情况以及如何保持质量的任何见解？

P.S。即使图像在不同的div容器中，我也检查过这种情况。

P.S。这似乎是浏览器特定的：
铬合金质量都很好 在IE9中，两者质量都很差 在firefox中，笑脸的质量在第一小提琴中更糟糕。 我希望至少在Firefox中工作。

我是html的新手所以请耐心以防这是显而易见的

Answer 1

您正在为图像设置高度和宽度值。如果这些值大于或小于图片的实际尺寸，则浏览器必须对其进行缩放。此过程会改变图片的分辨率，使其看起来有点模糊。