提升网页加载速度和体验 谈图片优化的方法

　　2. 通用类、随机类

　　按照首页图片出现的频率分成：通用类、随机类

　　通用类：每个人首页都会看到，图标、按钮、小背景。

　　例如，顶部托盘图标、左导图标、feed区图标、发布器图标、身份图标、操作类图标、状态类图标、按钮。尽可能的采用PNG的格式保存，文件会相对来说较小一些。

　　下图为微博的按钮和左侧导航icon小图的，使用GIF和PNG格式的大小对比：

　　下图为微博的按钮背景图分别使用GIF和PNG格式保存的大小对比：

　　随机类：根据自己定义和发布的内容而定。

　　A. 表情GIF

　　可以使用FireWorks或者ImageReady，建议使用ImageReady。

　　最好是手动一张张的调整，因为这些表情图的色彩值都比较少，如果使用比较大的颜色时会存储量较大。

　　另外，批处理的话也是需要一个文件夹一个文件夹去处理，表情的文件夹太多了，基本上批处理还是很慢。批处理如果是使用FireWorks的话，有的动画会出现变快或者是缺边的情况。

　　手动处理时，根据索引色的多少来存，一般来说4-128索引色存储。

　　B. 换肤类图片：

　　采用JPG格式或者PNG格式。

　　皮肤的主要背景图中如含有真实的照片或者文字，可采用JPG格式，为了保证更接近设计图需采用85以上的品质压缩图片。如果色彩跨度不大的背景图片，可采用PNG格式。

　　C. 勋章类：

　　目前有GIF和PNG两种格式，GIF的是小图、PNG的是中图和大图。品质选128即可。

　　这个目录批处理比较快。因为都是在同一个文件夹里。但是手动的话会更小一点。

　　D. 各种广告：

　　发布器下方tips、右侧广告、底部广告。采用JPG格式或者PNG格式。

　　E. 用户相关图：

　　头像、用户发布的图这个需要在后台控制压缩品质。采用JPG格式或者PNG格式。

　　图片优化工具Smush.it 介绍

　　Smush.it 是 YUI 团队制作的一款基于 YUI 的在线图片优化工具。

　　它是基于以下四条图片优化建议制作的服务：

　　· 移除 JPG 中的 meta 数据。

　　· 优化 JPG 的压缩率。

　　· 转化特定 GIF 图片到可索引的 PNG 格式图片。

　　· 从可索引的图片中移除没用到颜色信息。

　　所以使用 Smush.it 压缩图片可以删除图片中多余的字节而不改变图片的视觉效果和质量。

　　在实际使用中发现：

　　· 它还能把某些JPG图片转化为PNG图片。

　　· 对于PNG24真彩色图片，能够去掉一些肉眼察觉不到的颜色信息，弥补photoshop和firework优化不了PNG24图片的不足。

　　· 可以优化GIF动画图片。

　　Smush.it 使用

　　方法一：使用Firefox的插件Yslow里的Tools工具中的All Smush.it™

　　拿微博首页为例：