Question

在我的网站上，我的客户报告说，按代码缩小尺寸的图像（即指定的宽度/高度）出现锯齿状和像素化。我问她使用什么浏览器，不可避免地是Internet Explorer。

有没有办法在IE中优化图像，还是我需要在将它们放到网站上之前手动调整photoshop上的图像大小？

有问题的图片大小从220x220调整到80x80，我点击后将javascript扩展为220x220。

Answer 1

在浏览器中向下或向上调整大小可能看起来很糟糕。它因浏览器而异，但显然是IE is the worst。

最好是编写服务器端脚本来创建缩略图，或者如果图像质量很重要，则自己手动执行。它还可以节省带宽，因为您不需要加载大图像，只显示1/10像素。

Answer 2

您应该避免使用宽度和高度来调整大小。这将导致更长的加载时间（在慢连接和大图像上）。

更好的想法是制作缩略图（例如使用Photoshop）并使用“网页保存”选项来进一步缩小尺寸。

Answer 3

IE中默认关闭双立方图像重采样。您可以使用它在重置样式表中打开它：

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

Answer 4

使用timthumb，它会为你创建缩略图，你只需要链接到脚本，并指定缩略图的大小就是这样。 http://www.darrenhoyt.com/2008/04/02/timthumb-php-script-released/

我在我的一个网站上使用它 - ＆gt; http://iv-designs.org/ 你可以看到图像很干净而且没有像素化。

Answer 5

假设您的图像是JPEG图像，最简单的选择是使用IE7的双三次图像大小调整功能，您可以使用CSS打开它：

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

请注意，它会影响性能（使用它会减慢浏览器速度）。它在IE6中也没有效果，在IE8中不再需要。

另一种方式（在IE6中可行）是使用Ethan Marcotte的精彩Fluid Images script，它使用了一些该死的聪明的CSS过滤器来修复IE6和7中的问题。My own variation on the theme修复了右键单击问题，但需要jQuery。