IE9中质量差的缩小图像答案

【问题标题】：Poor quality downsized image in IE9IE9中质量差的缩小图像
【发布时间】：2011-09-01 21:06:15
【问题描述】：

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

同一页面在 IE8 和 Chrome 中显示得非常好。 IE7 也可以，只要我使用 CSS 样式-ms-interpolation-mode: bicubic;)。 Firefox 显示的结果与 IE9 相同，但这似乎是一个已知错误，请参阅 https://bugzilla.mozilla.org/show_bug.cgi?id=486918

我浏览过 Stack Overflow 和其他论坛，但没有发现任何关于 IE9 渲染与 IE8 的抱怨。

有谁知道这是 IE9 中的一个错误。有解决办法吗？

我无法提交图片，因为我是 Stack Overflow 的新用户。但您可以轻松重现该问题：

在 Paint.Net 中创建一个 800x600.jpg 的画笔宽度为 1 或 2 的椭圆。以 200 x 150 像素的 IMG 标记显示此图像比较 IE9 与 Chrome 和 IE8（使用 IEtester）

【问题讨论】：

我认为客户端图像重新调整大小通常是一种不好的做法。除了浏览器之间的渲染差异之外，下载的字节数超过所需的字节数以及渲染图像的处理时间也会对性能产生影响。
如果您无法将图片直接嵌入帖子中，您可以随时将其留在评论或链接中，任何拥有编辑权限的人都可以为您编辑
@Xint0 - 如果您在其他地方显示较大的图像，那么拥有多个不同尺寸的图像会导致更大的下载量。
有时在客户端调整图像大小是有意义的。假设您正在制作一个包含图像查看器的零占用空间单页 Web 应用程序，并且您想要进行缩放操作。当图像在服务器上调整大小并将整个图像发回时，让用户在客户端等待可能是不可行的。

标签： html internet-explorer rendering internet-explorer-9 image

【解决方案1】：

默认的ie图片resize算法不是很好。如您所述，IE7 添加了更改算法的功能：

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

这在 IE9 according to the docs page 中被删除了，但他们没有提供任何信息来说明使用什么来代替。如果您可以设法不在浏览器中调整图像大小，您将获得最佳效果。

根据您的用例，您也许可以在较新的浏览器中使用画布以获得更好的结果。 Resizing an image in an HTML5 canvas 中接受的答案看起来很有希望:)

【讨论】：

感谢您的回复。不幸的是，我的应用程序设计暂时阻止了我使用 Canvas。所以我会尝试在服务器上以编程方式调整图像的大小。顺便说一句：我注意到这个渲染问题只发生在绘制的图像上。调整大小的照片在 IE9 中看起来非常好。
感谢您对 IE 的提及，我一直在挠头看着 IE9 中的图像，直到我读到它！

【解决方案2】：

我在 IE 和图像大小调整方面看到了很多。老实说，您最好通过图像编辑器或自动方式制作一个单独的较小版本的确切尺寸。

【讨论】：