Web中图片的优化泛谈

图片占网站源码的很大一部分，有的甚至超过总量的50%，在不减少网站功能和增加处理复杂度的情况下，图片优化将大有可为。这里只是根据经验对工作中优化的方式进行讨论。

图片特点

首先要明确图形和图像的概念。图形是一般是设计人员绘制的，线条颜色过渡很明晰，颜色数量较少（矢量图形）；图像是真实的照片，包含真实世界中的色彩，颜色数量很大（位图）。按颜色数量区分，可以分为调色板图像格式和真色彩图像格式，前者包含2⁸(256)种颜色，而后者包含2²⁴(1600多万)，相应的，文件也就更大。Web中一般也是以此来衡量具体用哪种格式。

** 前面说的矢量图形和位图概念并不严格，只是一个类比*

Web上常用的图片包括三类：GIF、JPG、PNG。

GIF

• 透明度 只支持布尔透明，要么全透，要么不透明；
• 动画 支持动画，且是几种图片中唯一支持动画的图片格式；
• 损耗性 无损耗，对gif的操作不会对质量产生损耗；
• 水平扫描 压缩过程中，像素是由上到下水平压缩的，水平重复颜色比垂直重复颜色的图片更小，也意味着同等条件下，横向的比竖向的图片更小。

JPG

• 透明度 不透明；
• 动画 无动画；
• 损耗性 有损耗，除了固定角度的旋转都会造成失真，即使在PS中选择质量100%也会有损耗；

PNG

• 透明度 支持多种透明度；
• 动画 无动画；
• 损耗性 无损耗；
• 水平扫描 与gif相同

PNG图片包含许多子类，根据可以包含的颜色值（不是固定的几种，而是一张图片中的颜色值不超过这么多个即可）分为:

PNG8: 256色PNG别名

PNG24: 全色PNG别名

PNG32: 全色PNG别名

比较

GIF & PNG

毫无疑问，如果需要用到动画，GIF是唯一的选择。

PNG8 拥有GIF所有的特性，并且有更好的压缩比，除了特别小的GIF图片会更小，大多数情况下应该选择PNG8。另外PNG8也支持alpha透明，而且这个格式的透明度在IE6下表现为全透明，其他浏览器表现为渐变透明（PhotoShop中唯一不支持的PNG格式，可以在FireWork中导出该格式图片）。

JPG & PNG

JPG和PNG24、PNG32都可以包含足够表现现实世界中丰富色彩的数据，PNG更是能够支持多个级别的透明度，但是对于多色彩图，JPG具有更好的压缩比。尽管JPG是有损的压缩，即使在PhotoShop中选择100%的图片质量仍然会造成损耗，但是对于满足人眼需求足够了。PNG作为无损压缩格式，可以作为中间格式，待编辑完成后再转换成JPG格式，可以避免每次保存造成的损耗累加。

JPG适合多色彩但无需透明度的场合，全色PNG更适合作为中间格式，或在需要透明度时使用，相应的，全色PNG所占空间更大。

优化方法

1. 最基本的，通过 PS 的 “导出web所用格式” 的切片，它会自动为我们做很大的优化
2. 在 1. 过程中，通过导出前的选项降低颜色值（png/gif）、降低图片质量(jpg)来进一步减小图片大小
3. 导出后，用其他工具进一步优化

   ImageAlpha 一个可以进一步优化png图片的工具，采用有所压缩

   ImageOptim 去掉图片头部信息等对表现无意义的数据，如果有版权，请不要清除

除了针对图片本身的压缩和数据进行优化，在切图之前就要整理好哪些图片可以合并，哪些只能拿出来，尽可能的应用 css sprite 技术，减少网站图片的数量。

总之，动画用 GIF，多色彩图片使用 JPG，剩下的 PNG 就足够了。甚至为了适应IE6，实现浏览器的平稳退化，可以使用具有Alpha透明度的 PNG8 格式图片。