[转载]kejun- 图片优化

图片无损优化kejun's blog

总结Stoyan Stefanov在Velocity08'的演讲'Image Optimization - 7 mistakes (and how to correct them)', http://www.phpied.com/image-optimization-7-mistakes/
无损优化。

1. 用PNG代替GIF。PNG8(256)/PNG(真彩)

2. Crush你的PNG。PNG是按块(chunk)保存信息。大部分块可以安全的被删除。
命令行工具：
pngcrush: http://pmt.sourceforge.net/pngcrush/
如：
> pngcrush -rem alla -brute -reduce src.png dest.png
pngrewrite: http://www.pobox.com/~jason1/pngrewrite/
OptiPNG: http://www.cs.toronto.edu/~cosmin/pngtech/optipng/
PNGOut: http://advsys.net/ken/utils.htm

3. 剥去JPEG的描述数据(metadata)。
命令行工具 - JPEGTran(http://jpegclub.org, http://www.jpegclub.org/jpegtran.exe )
> jpegtran -copy none -optimize -perfect src.jpg desc.jpg

4. 使用色板(palette)PNG。在保证质量的前提下，将真彩PNG转换为色板PNG。
命令行工具：pngquant (http://www.libpng.org/pub/png/apps/pngquant.html)
> pngquant 256 src.png

5. 避免使用AlphaImageLoader至少使用_filter。IE下的css filter会导致堵塞渲染、冻结浏览器、增加内存消耗、一个元素一张图、无法实现CSS Sprites。如果要用，针对IE6使用hack。

6. Crush服务器端产生的图片。

7. 合并图片。使用CSS Sprites。主要是节省HTTP请求数。

另外需要注意的是favicon.ico <=1K, 完全没必要用动画，Cache。工具: imagemagick, png2ico
使用单独的图片服务器，使用CDN, 而且是no cookie。