在前端工程师完成页面的静态代码之后，视觉设计师可以将定位好的Sprite图片进行像素级的优化，去掉不必要的杂色，并且用已存在的索引色对缺失的地方进行补充，这样不仅能压缩文件大小，还能提升设计品质。

Sprite图片的优化方式有很多种，比如通过索引色排序进行颜色的删减和替换，或是直接通过像素描绘进行优化。设计师可以根据具体的场景进行选择和处理。

以上设计和优化的方法只是我在工作中一些经验的积累和总结，个人感觉每一个点展开来都有很多值得研究和讨论的地方，限于篇幅有限不能继续深入。关于图片优化的高级技巧有两篇比较经典的文章推荐给大家：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。

4、附录-Photoshop中各种参数的含义及设置技巧

PNG8的参数设置

减低颜色深度算法与颜色

指定用于生成颜色查找表的方法，以及想要在颜色查找表中使用的颜色数量。可以选择以下减低颜色深度算法之一：

1. 可感知：通过为人眼比较灵敏的颜色赋以优先权来创建自定颜色表。
2. 可选择：创建一个颜色表，此表与”可感知”颜色表类似，但对大范围的颜色区域和保留 Web 颜色有利。此颜色表通常会生成具有最大颜色完整性的图像。“可选择”是默认选项。
3. 随样性：通过从图像的主要色谱中提取色样来创建自定颜色表。例如，只包含绿色和蓝色的图像产生主要由绿色和蓝色构成的颜色表。大多数图像的颜色集中在色谱的特定区域。
4. 受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）调板通用的标准 216 色颜色表。该选项确保当使用 8 位颜色显示图像时，不会对颜色应用浏览器仿色。（该调板也称为 Web 安全调板。） 使用 Web 调板可能会创建较大的文件，因此，只有当避免浏览器仿色是优先考虑的因素时，才建议使用该选项。
5. 自定：使用用户创建或修改的调色板。如果打开现有的 GIF 或 PNG-8 文件，它将具有自定调色板。使用”存储为 Web 和设备所用格式”对话框中的”颜色表”调板可自定颜色查找表。
6. 黑白、灰度、Mac OS、Windows使用一组调色板。

出处：taobaoued
责任编辑：bluehearts

上一页 图片格式与设计 [9] 下一页 图片格式与设计 [11]