关于gif图片（或png8）杂边锯齿的问题

1. gif图片产生杂边锯齿的缘由
   1.1 索引透明颜色与Alpha透明颜色
   1.2 photoshop的半透明平滑处理
   1.3 gif图片（或png8图片）产生锯齿的缘由
   1.4 形状与锯齿之间的关系

2. 如何有效的避免gif图片的杂边锯齿
   2.1 绘制带有锯齿的图形或文字避免杂边锯齿
   2.2 经过杂边设置弱化网页中gif锯齿的影响
   2.3 使用gif透明图片插件
   2.4 手工对图片进行像素抠取

3. 若是上面全部的讨论，提供的方法都不适用

3、文章主体

<strong id="g1'>1. gif图片产生杂边锯齿的缘由

   1.1 索引透明颜色与Alpha透明通道
   要说索引颜色透明，首先要讲讲什么是索引颜色，百度百科上有对索引颜色的解释，我以为很关键的一句是“挑选一副图片中最有表明性的若干种颜色（一般不超过256种），编制成颜色表。”个人理解就是，找一些跟你图片颜色最接近的一些颜色（不超过256种）组成你这张图片。
   并且，很重要的是，这些颜色里面有个很特别的颜色，就是索引透明色。这种颜色跟索引绿色，或是索引红色属于性质相同的颜色，这是个颜色。而这种颜色表现的效果就是透明。IE6是支持索引透明色的，因此gif或png8这类索引颜色编码的图片的透明背景在IE6下是能够透明显示的。
   至于Alpha透明通道，百度百科上也有相关的解释。Alpha通道通常用作不透明参数，有些状况下用0%-100%表示，有时候用0-1表示，还有时候用0-255表示，两头分别表示彻底透明和不透明。我知道的，css里，IE下有个透明度滤镜，使用0%-100%表示的，例以下面：filter:alpha(opacity=50)；而其余浏览器（Firefox，chrome等）是用0-1表示的，例如：opacity:0.5；在as中，透明度能够用0-1表示，例如：test_mc.alpha=0.5;也能够用0-255表示，可是以十六进制的形式表示的，例如：0x80FF0000就是50%透明的红色。在css3中，颜色的表示也加入了Alpha通道。
   平时咱们看到的半透明图片都是png32的，都使用了8位（2的8次方为256）的Alpha通道，不然没法表示半透明。或许有人或有疑问，不对啊，我用photoshop保存图片的时候，就是使用的png24，是支持半透明的啊。这里面实际上是有一点小猫腻的，看下面这张截图：

photoshop保存图片为png24格式时部分界面

   观察黄色半透明覆盖的区域，能够看到有个“透明度”选项被勾选了，这个选项被选中表示图片支持Alpha透明通道，若是图片确实是含有透明或半透明的Alpha通道属性的，则保存的图片就会含有Alpha通道，使得保存的图片为透明或半透明，而这个保存的图片实际上是png32格式的，若是不勾选这个“透明度”，则保存的图片就是正宗的png24的图片，红绿蓝各8位通道，无Alpha通道。这与fireworks中直接标明png24，png32有所不一样。为何photoshop会以png24加勾选“透明度”选项的方法表示png32的图片呢，我我的观点是（如下为个人推测，仅供参考），让图片的保存更智能些，怎么说呢，若是一张图片不含有Alpha通道（不透明的），但用户却以png32的方式将其保存，则图片中所含的8位Alpha通道则是多余的，而采用photoshop这种方式，若是一张图片不含Alpha通道，即便用户勾选了“透明度”选项，图片依然以png24形式保存，避免了多余的信息，这也许就是photoshop采用png24为头加勾选“透明度”方式保存图片的缘由。

   1.2 photoshop的半透明平滑处理

   不知道您注意到没有，在photoshop中，绘制选区或图形时有个“消除锯齿”的勾选项，例以下面截图：

   边缘锯齿与边缘平滑能够说是两个相对的概念，勾选“消除锯齿”选项，就意味着对图形的边缘进行平滑处理。在photoshop中，如何对图形边缘惊醒进行平滑处理的呢？就是使用半透明！

   使用半透明填塞弧线转角或斜线空隙，造成视觉上的天然过渡，从而产平生滑的效果。例如上图所示，在线条的边缘处使用了半透明，使得边缘与周围环境有了过渡，当图片原始比例显示时，这种半透明的过渡是看不见的，要把图片放大到肉眼可见的像素级别就会清楚了看见这些半透明，这就是上图所展现的。

   1.3 gif图片（或png8图片）产生锯齿的缘由
   gif图片（或png8）产生锯齿的缘由一句话总结就是：gif或png8只有透明索引颜色，没有半透明索引颜色，不支持位图中半透明边缘，只好用其余索引色代替（例如白色#FFFFFF），从而产生杂色锯齿。正如上面两点提到了，gif或png8是索引图片，图片中全部的颜色都是索引颜色，而这些全部的索引颜色中有关透明度的就只有一个透明索引颜色，并无半透明索引颜色，加上photoshop采用半透明实现边缘平滑处理，因此致使photoshop导出的gif图片（或png8）会产生杂边锯齿。

   1.4 形状与锯齿之间的关系
   杂边锯齿的大小以及有无与图形的形状是有关系的。通常来讲，水平线，垂线，矩形是没有杂边锯齿的问题的，由于他们都是彻底填充像素的。可是弧线以及斜线就会遇到杂边锯齿的麻烦，尤为当形状不规则时，例以下面这张放大1600倍的图片一条斜线的截图：

杂边锯齿

   若是这张图片在网页中显示，浅色背景还好，要是深色背景，那就很难看了。参见实例页面图片2。
   即便是倾斜的直线也是存在杂边锯齿的问题的，而其中杂边锯齿影响最小的就是45度斜线，这是由于45度的斜线的全部杂边锯齿大小都是一致的，肉眼看到的是一排一样的半像素（半像素之说可能不许确，仅用以说明肉眼所见之感受）杂边锯齿，只要杂边颜色不是与背景色对比很强烈，这种程度的锯齿是能够忍受的。而其余角度的斜线的杂边锯齿大小则以等差大小排列，在非杂边色背景下锯齿明显，可容忍度大大下降。

2. 如何有效的避免gif图片的杂边锯齿
   2.1 绘制带有锯齿的图形或文字避免杂边锯齿
     2.1.1 绘制带有锯齿的图片
     正如在1.2部分一开始提到的，photoshop中，选区或图像像素填充工具选中后，在上部的选项栏里会出现一个“消除锯齿”的选项，默认是勾选的，意思是说绘制的图形或选区边缘是要平滑的，也就是部分边缘要用半透明的颜色代替，这就会致使保存的gif图片（或png8）的边缘有杂边锯齿。换个角度想，若是不勾选这个“消除锯齿”，则边缘就不会平滑处理，就不会产生半透明过渡填充，也就不会出现杂边锯齿了。事实证实确实如此，例以下面这张不勾选这个“消除锯齿”选项所绘制的椭圆。

虽说椭圆的边缘不是很光滑，可是同时边缘没有了半透明的过渡，保存的gif图片（或png8）就不会出现杂色锯齿，不会出现图片边缘锯齿杂色与背景不融合的状况了。

     2.1.2 带有锯齿的文字
     与绘制图形同样，文字也有使用未消除锯齿的显示方式，就是在设置消除锯齿的下拉选项中选择“无”，例以下面这张选项栏截图的标示：

下图为未消除锯齿的文字，在实例页面图片3中能够看到此图片（以png8格式保存）在深色背景下的显示，您能够看到没有一点点杂边锯齿。

   2.2 经过杂边设置弱化网页中gif锯齿的影响
   默认的杂边颜色是白色，经过更改这个颜色能够弱化网页中gif图片（或png8）杂色锯齿的影响。这种改变分为两种状况，一是将杂边颜色设置为网页的背景颜色，可是这不适用于背景常常变化的状况；还有就是将杂边颜色设置为图片边缘的颜色，可是这种状况不适用于图片边缘颜色不少的状况。两种设置各有利弊和局限性，须要根据实际状况进行调整。
举例说明，例如，我要保存一个对锯齿进行锐利处理的文字，以png8格式保存（相对于gif，图片更小一些），对杂边颜色进行修改，一个改成字体颜色（#34538b），在保存一个杂边颜色为黑色（#000000）的png8图片。

这里设置杂边颜色就不上图了，由于单击“其它…”后会出现一个选取颜色的对话框，直接选取颜色或输入相应的颜色参数就好了。蓝色杂边颜色的图片为实例页面中的图片4，黑色杂边的图片为实例页面中的图片5，咱们对比图片2能够看到，对杂边颜色进行相应的设置之后，在深色背景下，讨厌的白色杂边锯齿基本上就不见了，整个显示也舒服多了。可是这种处理是有局限性的，若是页面背景常常更换或是图片自己不是纯色或边缘不是纯色，则使用杂边颜色设置的方法就不适宜采用了。还有一个“一劳永逸”、“一了百了”的方法就是设置杂边“无”，这样，您就不用担忧背景变化的问题，或是图片自己的问题了。

   2.3 使用gif透明图片插件
   在photoshop5里面有个GIF89a导出的选项，能够自动导出消除了杂边锯齿的gif图片，并且大小优化的很好。可是后来的photoshop版本中将这一功能给删除了。可是，经过文件移植能够在以后的photoshop版本中实现GIF89a导出的功能。下载移植文件：gif89a.zip。
   使用方法以下：解压文件，在文件夹中有个GIF89a Export.8be的文件，将其复制到您现有photoshop安装目录下的Plug-Ins\Import-Export目录下，例如我使用的是photoshop cs3，安装在C盘下，则须要复制到C:\Program Files\Adobe\Adobe Photoshop CS3\Plug-Ins\Import-Export目录下。而后从新启动photoshop就能够了。
   例如，仍是保存对“gif图片锯齿”这几个文字锐利处理的图片，选择文件->导出->GIF89a输出，而后单击“好”就能够了。

您能够在实例页面图片6中看到导出的gif图片效果，没有杂边锯齿。

   2.4 手工对图片进行像素抠取
   看标题您应该知道该方法的意思了，就是采用手工的方法，将图片放大到必定程度，将半透明的像素一个一个删除或颜色填充，这种在png小图标处理或小图标制做的时候比较适应，若是是个很大的图片，兄弟，您要作好打持久战的准备了！具体如何一个一个像素的处理图片，我以为简单带过就好了，将图片倍数放大到足够大，例如1600倍，这时候，您能够清楚的看到图片边缘的半透明像素格，将其一个一个删除就能够了，删除方法建议用选区。
   不过我不推荐这种生产效率低下的方法，若是您对我上面的方法有必定的理解的话，估计就不会对这个方法感兴趣了。

3. 若是上面全部的讨论，提供的方法都不适用
若是上面全部的讨论，提供的方法都不适用，我想，您可能得使用png24以便支持一些半透明。我也知道，IE6不支持Alpha透明通道，不过没有关系，我以前专门写了篇关于IE6与png图片打交道的文章：IE6下png背景不透明问题的综合拓展。涵盖面很广，写得也比较认真，确定会对您有所帮助的，两篇文章珠联璧合，相信之后遇到有关图片透明度的问题就不会再难倒您了。