<dexbol />

最近看了Images Optimization 系列文章,作者是Stoyan Stefanov，就职于Yahoo Exceptional Performance小组，Yslow的主要开发人员。这里记录一下阅读后的心得。

1. alexa前十名的网站，图片占所有组件的比重是46.6%,所以对图片做优化是相当必要的。

2. “Give PiNG a chance !”.这个是老生长谈了。不过这里的png是指索引png(8位png图片，以后统称png8),而不是真彩png（24或32位png，以后统称png32）。因为png32并没有什么优势，保存成jpg通常比png32要小。对图片格式的使用总结如下：

   • 照片存为jpg格式。
   • 动画保存为gif格式。
   • 其他都用png8搞定。

   读这篇文章时我最大的收获是知道了：png8也支持半透明（variable/alpha transparency）。这让我兴奋的半天。而且不同于png32的是，不支持png半透明的浏览器(如ie6)会自动降级到全透明(像gif那样)，而不是像png32那样会有一个难看的背景。(demo)

3. 压缩图片

   压缩PNG，主要工具pngcrush

   >pngcrush -rem alla -brute -reduce src.png dest.png
   

   -rem alla : 除了关于透明的信息外，其他全都干掉。
   -brute : 很暴力的使用各种方法压缩，以使图片被压缩到最小。
   -reduce : 尽可能的删掉调色板中多余的颜色。

   一次处理多个文件可以张样：

   >pngcrush -rem alla -reduce -brute -d folder src1.png scr2.png
   

   对于alexa前十的网站，用这招平均可以干掉16.05%的大小。

   其他压缩工具还有：pngout , optipng 等 。强烈推荐一下pngout，它总能给我带来惊喜，比如一个用pngcrush压缩过的图片(32k),用pngout压缩后还可以再干掉5k！关于这些工具的性能介绍可以阅读 Stoyan Stefanov的另一篇文章PNG optimization tools

   去掉jpeg的metadata信息(包括EXIF，application datameta以及评论)，主要工具jpegtran

   >jpegtran -copy none -optimize src,jpg dest.jpg
   

   上面的命令复制并优化src.jpe,复制过程中去掉了所有metadata信息。同样用这招前十大网站可以干掉11.85%

   使用png8替换非动画gif，工具:imageMagic

   >convert image.gif PNG:8:image.png
   

   然后再对png进行压缩，用这招前十大网站可以干掉20.42%

   优化动画gif，使用工具GIFsicle

   > gifsicle -O2 src.gif > dest.gif
   

   上面命令的作用是删掉相同的帧，详见这里。

   觉得上面的太麻烦？使用smush.it吧。这同样是Stoyan Stefanov的杰作。

4. jpeg 渐进式还是普通式？渐进式的优点是对用户尤其是窄带用户更友好,不过关键还是看哪种更小。Stoyan做了一个测试，最后的结论是：小于10k的普通式比较小，大于10k的渐进式比较小。测试的具体数据和过程在这里

5. 避免使用ie的AlphaImageLoader滤镜，因为AlphaImageLoader滤镜是梯形渲染所以会使整个页面渲染速度变慢，而且比较费资源。具体数据点击这里。代替方案是使用VML，DD_belatedPNG就是一个利用vml解决ie不支持半透明png的js对象。用它不仅可以让ie6支持半透明png，还可以支持background-repeat 和:hover .代价是要多下载一个5.5k的js文件。个人感觉并没有太大必要。

以上链到YUI的链接都需要穿墙。