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

时间与内存 – 副作用＃2和＃3

另一个使用AlphaImageLoader的副作用是它要使用更多的内存。这个问题，我们一般会认为访问者的电脑内存是足够的，但对于更早的电脑（可能还在运行IE6或更低）则可能并非如此。

所以，它的性能问题则是我们最感兴趣的，衡量性能需要测试它在浏览器中表现。所以，让我们做一个使用时间及内存的测试。

首先，让我们做一个参考页：它使用了100个<DIV>且它们具有相同的背景图片（不使用滤镜）。然后我们再做一个100个<DIV>背景相同但使用滤镜来实现的页面。使用100个滤镜来呈现背景的页面可能在一般的页面中不常见，但这样放大将帮助我们更好的测试。它将显示出每个页的“价格”。（译者：作者在这里创造了一个“价格”，是为了说明每个元素或每个页面中要消耗多少系统资源。）

时间从页面的onload事件后开始计时，图片也已经缓存，这样用以消除需要加载网页和图片的影响。内存消耗使用ProcessExplorer来帮助我们测量。

这里统计了一台双核2GHz CPU、500MB内存电脑的IE6中的10次结果。在一个不这么强大的电脑中，加载时间可能会更糟糕。

正如你可以看到，使用AlphaImageLoader的结果是相当的糟糕——测试页加载慢了27倍而且使用了78倍的内存。当然这些结果有很高的随机性——这只是一个图片且只在一台电脑上的测试（相对强大且未尽其用）。由于不同的图片，应用于不同的元素的数目及不同的电脑，结果可能有很大的不同，特别是当只有较少的内存和CPU或者把网络延迟（副作用＃1）也加入统计。但这个例子说明了重要的概念：

• AlphaImageLoader是缓慢的，它需要更多的内存

• 它对的每个使用它元素的起作用，而不是每张图片

如果你有一张雪碧图并且你使用的滤镜于不同的元素（使用Alpha透明的雪碧图是非常棘手的，但也不是完全不能用），那么每个使用雪碧图的元素都会消耗更多的系统资源。

雅虎搜索案例研究

使用上面AlphaImageLoader实验测试中的“价格”理念，你可能想象或计算出要为每个滤镜使用多少的系统资源。但一个百万级在不同的浏览器、电脑、带宽和世界各地的测试能更好的说明这个问题。

雅虎的搜索结果页曾经使用PNG32雪碧图且使用AlphaImageLoader来实现透明度（旧版本的雪碧图仍然存在，如果你很好奇）。如果更换成PNG32为颜色有损的PNG8（以前讨论过）能降低50-100ms的页面加载时间为IE5-6用户。100ms可能并不起眼，但相对于使用滤镜的页面，它至少节省了10％的时间。此外，根据亚马逊研究，100ms的速度意味着1％的销售会减少（即使他们是内容型网页）。增加1％的收入而只需要更换一个图片看起来是笔好买卖。

所以，现在怎么做？

最好的事情是避免AlphaImageLoader像雅虎搜索一样，花时间去创造PNG8让它在IE6及其它浏览器中都有最好的表现。那么如何创建一个优美的PNG8呢？首先创建一个GIF图片，只有一个完全透明或完全不透明的像素。然后确保它看起来可以接受的（如同它在IE6的表现），继续加强与半透明有关的像素比如圆角或任何受益于透明度的图像。遗憾的是，据我所知，Fireworks是目前唯一使PNG8拥有Alpha透明度的图像处理软件。你也可以尝试其它工具，如命令行工具 pngnq和pngquant，但因为自动PNG32到PNG8的转换不是总令人满意，你可能需要手动选择完全不透明的像素。

可能有这样的情况：当你将无法用PNG8达到效果而一定需要使用AlphaImageLoader——例如当大部分或全部图像是半透明（比如视频缩略图上的“PLAY”图标）。Dave Artz在美国在线有一些 其他案件显示PNG8并不够完美。在这些情况下（当然，也在你尽量说服设计师重新考虑使用透明度未果情况下），请确保你使用下划线HACK（_filter），使之不影响IE7的用户。

有时，有人用为IE6使用GIF而为其它浏览器使用PNG32，但是这样完全没有必要，一个PNG8就能在兼容两种不同的显示和alpha透明。

使用PNG8的更多好处：

1. PNG8通常比PNG32小

2. 在所有浏览器下只使用一个图像

3. CSS比较清爽，不用特别使用HACK或标签

4. 背景能够平铺