IE9中图像质量差且缩小后失真

Question

我注意到，IE9在呈现缩小的图像时质量非常低：如果我在200x150 IMG标签中显示一个800x600的jpg图像，结果在IE9中非常令人失望。

同一页面在IE8和Chrome中显示得很好。如果使用CSS样式- ms-interpolation-mode：bicubic; IE7也可以正常显示。Firefox显示与IE9相同的令人沮丧的结果，但这似乎是已知的错误，请参见https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我已经搜索了Stack Overflow和其他论坛，但没有找到关于IE9呈现与IE8的任何投诉。

有谁知道这是IE9中的错误吗？是否有解决方法？

我无法提交图片，因为我是Stack Overflow上的新用户。

但是您可以轻松地重现此问题：

在Paint.Net中创建一个带有1或2个刷子宽度的椭圆的800x600.jpg。

在200px x 150px IMG标记中显示此图像。

将IE9与Chrome和IE8（使用IEtester）进行比较。

- Koos

---

总体而言，我认为在客户端调整图像大小是一种不好的做法。除了浏览器之间的渲染差异外，还会导致性能问题，因为需要下载比实际需要更多的字节数，并且需要处理时间来渲染图像。 - Xint0

如果您无法直接嵌入图像到帖子中，您可以将其作为评论或链接留下，任何具有编辑权限的人都可以为您编辑它。 - Yi Jiang

@Xint0 - 如果您在其他地方显示较大的图像，则具有多个不同大小的图像会导致更大的下载。 - Grim...

有时在客户端调整图像大小是有意义的。比如说，您正在制作一个零占用的单页Web应用程序，并在其中添加了图像查看器，您想进行缩放操作。让用户在客户端等待图像在服务器上调整大小并发送整个图像可能不可行。 - racingcow

Answer 1

默认的IE图像调整算法并不是很好。正如你所指出的，IE7增加了通过以下方式更改算法的能力：

img {
-ms-interpolation-mode: bicubic;
}

据文档页面显示，IE9已经取消了此功能according to the docs page，但他们没有提供任何替代方案。如果您能够在浏览器之外调整图像大小，则可以获得最佳结果。

根据您的使用情况，您可能能够在新版本的浏览器中使用画布来获得更好的结果。Resizing an image in an HTML5 canvas中的被接受的答案看起来很有前途 :)

- lambacck

---

谢谢您的回复。不幸的是，我的应用程序设计目前无法使用Canvas。因此，我将尝试在服务器上通过编程方式调整图像大小。顺便说一句：我注意到这个渲染问题只出现在绘制的图像中。在IE9中，调整大小后的照片看起来非常好。 - Koos

感谢提到了IE，我一直在为IE9中的图像发愁，直到我读到这个！ - ChristoKiwi

Answer 2

我经常在IE和图片缩放中看到这种情况。你最好使用图像编辑器或自动化工具制作一个精确大小的小版本。

- onteria_