图片格式与设计那点事儿

　　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使用一组调色板。

　　建议：一般情况下默认选择“可选择”项即可。

　　仿色方法和仿色

　　确定应用程序仿色的方法和数量。”仿色”是指模拟计算机的颜色显示系统中未提供的颜色的方法。

　　较高的仿色百分比使图像中出现更多的颜色和更多的细节，但同时也会增大文件大小。为了获得最佳压缩比，请使用可提供所需颜色细节的最低百分比的仿色。

　　若图像所包含的颜色主要是纯色，则在不应用仿色时通常也能正常显示。包含连续色调(尤其是颜色渐变)的图像，可能需要仿色以防止出现颜色条带现象。

　　可以选择以下几种仿色方法之一：

　　1、扩散：应用与”图案”仿色相比通常不太明显的随机图案。仿色效果在相邻像素间扩散。

　　2、图案：使用类似半调的方形图案模拟颜色表中没有的任何颜色。

　　3、杂色：应用与”扩散”仿色方法相似的随机图案，但不在相邻像素间扩散图案。使用”杂色”仿色方法时不会出现接缝。

　　建议：一般只在图片颜色过多产生失真的情况下才需要选择仿色。建议选择扩散仿色，可以适当调节仿色的百分比以达到最佳的效果。仿色度越高文件大小也越大。

　　透明度和杂边

　　确定如何优化图像中的透明像素。

　　1、要使完全透明的像素透明并将部分透明的像素与一种颜色相混合，请选择”透明度”，然后选择一种杂边颜色。

　　2、要使用一种颜色填充完全透明的像素并将部分透明的像素与同一种颜色相混合，请选择一种杂边颜色，然后取消选择”透明度”。

　　3、要选择杂边颜色，请单击”杂边”色板，然后在拾色器中选择一种颜色。或者，也可以从”杂边”菜单中选择一个选项：”吸管”(使用吸管样本框中的颜色)、”前景色”、”背景色”、”白色”、”黑色”或”其它”(使用拾色器)。

　　建议：强烈建议由视觉设计师根据实际应用场景在保存之前就处理好透明图像的背景。

　　交错

　　PNG、GIF这两种图像格式都提供了一种功能，让图像能够更快地显示。图像可以以一种特殊方式存储，显示时先大概显示图像的草图，当文件全部下载后再填充细节。这起到一种很有意义的心理效果，因为这样使人们有东西可看，而不必坐着干等大型图像慢慢显示在屏幕上。

　　建议：对于尺寸和文件大小相对较大的图片建议勾选此项。

　　JPG的参数设置

　　品质

　　从”品质级别”菜单中选取一个选项，或者在”品质”文本框中指定一个值。”品质”设置越高，压缩算法保留的细节越多。但是，使用高”品质”设置比使用低”品质”设置生成的文件大。查看几种品质设置下的优化图像，确定品质和文件大小之间的最佳平衡点。

　　品质设置技巧

　　1、不要存100%品质的JPG格式图片。因为100%并不一定是最高的品质，而是一个优化算法的极限值，所以会增加不必要的文件大小。建议存储95%品质的图片就可以最大限度的降低失真。

　　2、谨慎使用50%品质以下的压缩率。使用50%以下品质存储时会采用额外的压缩算法而导致图片失真更严重，尤其是对于有高对比度的图片。

　　优化

　　选择”优化”创建文件大小稍小的增强型 JPEG。建议使用”优化 JPEG”格式以获得最大文件压缩量;但是，一些较旧的浏览器不支持此特性。

　　建议：建议勾选此项，目前基本已经不存在不支持改功能的浏览器。

　　连续

　　选择”连续”创建在 Web 浏览器中连续显示的图像。图像将显示为一系列的叠加，使查看者在整个图像下载完毕之前，能够看到图像的低分辨率版本。连续 JPEG 需要更多的内存用于查看，一些浏览器不支持该选项。

　　建议：勾选此项在某些情况下可压缩文件大小(图片大小大于10k时)，某些情况下会增大文件大小，建议在保存是根据实际情况决定。不过IE6及更早版本的IE浏览器不支持JPG连续显示，而是在图片完全加载后一次成像，用户体验上可能还不如不使用连续的逐步成像要好，所以建议慎选此项。

　　模糊

　　指定应用于图像的模糊量。”模糊”选项应用与”高斯模糊”滤镜相同的效果，并允许进一步压缩文件以获得更小的文件大小。建议使用 0.1 到 0.5 之间的设置。

　　ICC 配置文件

　　选择”ICC 配置文件”将图片的 ICC 配置文件与文件保留在一起。ICC 配置文件由某些浏览器用于色彩校正。(请参阅Photoshop中设置色彩管理。)

　　杂边

　　指定原稿图像中透明像素的填充色：点按”杂边”色板，然后在拾色器中选择一种颜色。从”杂边”菜单中选取选项。原稿图像中完全透明的像素由选中的颜色填充，原稿图像中部分透明的像素与选中的颜色相混合。

　　文章来源：淘宝UED