[译]图片优化 第五章：AlphaImageLoader

译者：AlphaImageLoader是一个让IE6正常显示PNG32时要用到的一个滤镜，但它在使用中也会产生一系列的问题，本文对使用AlphaImageLoader及替代方案都做了很详细的分析和总结。关于图片优化YUIblog有五章内容，其它内容大家貌似都懂，有兴趣的同学译吧。关于PNG32在Photoshop中导出的叫做PNG-24，但在Fireworks导出PNG会有三种格式，PNG8、PNG24、PNG32，它导出的PNG24是没有透明度的，为了防止大家搞错，所以我译做PNG32。

原文地址：http://yuiblog.com/blog/2008/12/08/imageopt-5

译文地址：http://www.misuisui.com/weblog/?p=2286

作者Stoyan Stefanov在雅虎的性能优化团队工作，领导开发YSlow性能工具。同时他还是一个开源贡献者、演讲者和技术作家，他的最新著作是《Object-Oriented JavaScript》。

本文是图片优化的第五章。点击以下链接查看其他章节：

• 图片优化 第一章：图片的重要性

• 图片优化 第二章：选择正确的文件格式

• 图片优化 每三章：四步减少文件大小

• 图片优化 第四章：渐进式JPEG …Hot or Not？

本章图片优化主要介绍IE浏览器私有CSS滤镜：AlphaImageLoader，开发人员经常使用它来解决在IE下显示PNG32图片的透明度问题。但使用AlphaImageLoader会使网页性能降低，从而伤害用户体验。所以我认为应改尽可能避免使用AlphaImageLoader。

快速复习

我们在图片优化 第二章：选择正确的文件格式一文中提到，PNG格式有几种不同类型，大致可以分为：

• Indexed (palette)，也被称为PNG8有多达256种颜色。

• Truecolor PNG，也被称为PNG32或PNG24，所有颜色都不会丢失。

这两种格式都支持 Alpha（变量）透明，但在IE6下PNG8显示为如同GIF图片一样的无变量的透明（例如，来源），PNG32则在原本显示透明背景的地方显示成了灰色（如下图所示）。

AlphaImageLoader修复

IE6（及更老版本的IE）提供了一个针对PNG图片显示的解决方案，通过其私有CSS滤镜。以下代码可使PNG图片在浏览器中正常显示：

#some-element { background: url(image.png); _background: none; _filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image.png', sizingMethod='crop'); }

你会发现，下划线的CSS Hack被用来针对IE6及更老的版本，它的作用是：

1. 不显示背景图片

2. 使用微软的AlphaImageLoader滤镜加载背景的PNG图片

因为IE7不使用CSS淲镜也能支持PNG图片的Alpha透明。（但IE8中又不一样，它实际上完全改变了CSS滤镜的语法 。）

该滤镜的有趣之处在于，它并没有改变图片，相反，它在改变使用该滤镜的HTML元素。而更有趣的是，它对所有使用它的元素都只在一个UI处理线程中处理。这个过程中每个使用该滤镜的元素都要消耗系统资源，当你使用滤镜越多情况就会越糟糕，即使你所有元素其实是用同一张图片。

现在的问题是：这将如何影响该网页的表现？

假死！副作用＃1

这里有一个简单的实验：创建一个页面，有一个CSS滤镜，然后模拟（和增大）网络中的延迟，延迟10秒加载淲镜中使用的图片。结果呢？在这10秒中什么也没显示（空白页），并且浏览器也会假死，这意味着你不能与浏览器进行交互：单击图标、菜单、键入网址…通通不行，甚至更不能关闭它。

这里是一个测试的例子。

在这个例子中，我没有用下划线，所以你可以看到在IE7下也一样会假死，即使在IE8的“兼容模式”下。

虽然效果演示的是夸张了的，但网络延迟也生活中的事实，这可能是最糟糕的用户体验，这意味着：有人来到你的网页，然后你让他的浏览器假死。

需要注意的是，它不阻塞并行下载。浏览器其实在后台还在下载其他网页文件，但没有进行渲染。你可以这样认为：IE不会渲染任何元素，直到所有的CSS下载结束（更多信息）。就是因为CSS中有一个图片的依赖于滤镜加载，所以CSS被认为没下载结束，导致IE不去渲染页面，直到依赖滤镜的图片被加载到。

如果你在网页中使用了多个AlphaImageLoader滤镜会怎么样呢？他们会一个接一个的处理。比如你有5个图片，每2秒延迟在服务器上，哪么浏览器就会有10秒的假死状态。