十三. 图像优化

图像基础知识

gif: 适用于动画效果，例如提示的滚动条图案

jpg: 是一种使用有损压缩的图片格式，它将图片的每个像素分解成8*8的栅格，然后对每个栅格的数据进行压缩处理，通过特殊的算法用附近的颜色填充栅格，隐藏细节。用户可以设置质量级别，从0到100，数字越少图片质量就越差。

png：是一种使用无损压缩的图片格式，它将图片上出现的颜色进行索引，保留在“调色板”上，PNG在显示图像的时候就会调用调色板的颜色去填充相应的位置。png又分为png8，png24和png32；png8表示支持2^8个种颜色，通常情况下png8是最通用的web图片格式。

选择jpg还是png

 　　对比jpg和png的特点，不同的图像使用不同的格式能得到最佳压缩效果。对于层次丰富颜色较多的图像，使用jpg更好，因为为了很好的显示这种图像，png将使用调色板颜色更为丰富的png24，这样图片大小会比jpg大。而对于颜色简单对比强烈的图像，使用png更好，因为png使用较少的调色板颜色就可以满足显示效果，而且得到的图片相对也比较小，而jpg是有损的，在清晰的颜色过渡周围会有大色块，影响显示效果。

将png24|32转化为png8

　　png图片的优化的很重要的一步：有些png24|32图片本身颜色较为简单，将其转变为png8得到的显示效果很类似，但却能极大地减少图片的大小。这一步可以通过使用工具pngGo来完成，这是一个完全免费的工具，而且可以根据需要设置png所需要的调色板颜色数，得到最大的压缩效果。

使用smushit.it在线无损化压缩

　　png格式将图像信息保存在“块”中，对于web显示来说，大部分的“块”都并非必要，所以优化策略可以将它们安全地删除。雅虎的YSlow提供了一个在线的无损化压缩工具smushit.it，不过基本上假如已经将图片转变为png8，使用smushit.it能压缩的空间已经很小了，不过对于追求极致性能的web来说，还是值得一试的。

参考资料：图片格式与设计那点事儿 《高性能网站建设进阶指南》