原文地址：http://www.smashingmagazine.com/2009/07/25/png-optimization-guide-more-clever-techniques/
译文地址：http://zanbu.blogbus.com/logs/43337794.html
引言
做为一名网页设计师你或许已经对png格式非常熟悉，它提供了完整的透明度，这是一种无损的，功能强大的图像格式。能够很好代替gif图像格式。但是绝大多数人认为它不可被压缩，带着这样的疑问我们来认真看完下面这篇文章。每一种图像格式都有自己的优缺点，如果掌握了相关知识，在进行图像优化时能够针对图像进行相应处理，得到高品质的图像和高压缩率，这是图像优化的关键所在。png被称为开源的gif图像格式，它们之间有很多相同的地方（如：索引色），但png在每一个方面都要强于gif。它介绍了一些非常酷的功能，例如：图像封装和压缩，但对我们网页设计师来说最重要的还是线性过滤（也称为“三角过滤”）。
什么是线性过滤？
这里介绍下它的原理，假如我们有一张5*5像素水平渐变的图片，如下图（每个数字代表了一种颜色）
通过上图你会发现相同的颜色都是在垂直方向上扩展，而不是水平方向。这样的图片如果用gif格式将很难获得高压缩率，它只压缩水平方向扩展的颜色（图像尺寸越大，越能说明问题）。让我们看看线性过滤是怎样将这类图像压缩的：
以数字2为标识的每一行都经过了“Up过滤”，“Up过滤”向 png 解码器发送信息：“对于当前的像素，提取上方像素的值，并将其添加到当前值”。图中第2-5行垂直方向都拥有相同的值。所以它们的值都是0，如果这样的图片越大那么压缩比率也越大。
在理想情况下，“Sub过滤”能提供更好的结果：
以数字1为标识的每一行都经过了“Sub过滤”，它发送信息给解码器：“当前像素提取左侧像素的值，添加到当前值”。例子中的值全为1，我想你大概也猜到这样的数据肯定能被有效的压缩。
线性过滤是非常重要的概念，尤其是在图片处理时可以针对过滤特点进行处理以便得到更好的过滤效果。png有5种过滤器：None（无过滤），Sub（当前值减去左侧像素的值），Up（减去上方像素的值），Average（减去左侧和上方像素的平均值）和Paeth（替换上方，左边或者上方的左边像素值，并重新以Alan Paeth命名）。
通过比较下面的图片，我想大家应该都能明白“线性过滤”的魅力所在。
gif：2568字节
png：372字节
图片类型
png是一种存储元数据信息的图片类型。如果你是Photoshop用户，你应该已经对png8（索引图像）和png24（真彩色图像）非常熟悉，如果你是 Fireworks用户，或许已经知道png32（真彩色透明图像）。但是Photoshop的png24格式也能存储真彩色透明图像，其实这些命名都不是官方的，所以在png图像格式说明面并不能找到这些概念，为了方便起见，在这次讨论中我们采用Photoshop的命名方式。
png 可提供5种图片类型：灰度，真彩色，索引色，带alpha通道的灰度，带alpha通道的真彩色。遗憾的是Photoshop只能导出3种图像类型：带透明的索引颜色，真彩色，带透明度的真彩色。这就是为什么大家一直认为Fireworks是png图像最好处理工具。其实不然，Fireworks并没有足够的工具来处理导出的png图像，它仅仅是在导出时做一些微小的优化工作。
那还有没有更好的png压缩工具呢？答案是肯定的。OptiPNG和pngcrush都是非常有效的工具，从本质上来看，这些工具主要做以下优化：
1.选择最合适的图像类型（例如：如果图像中没有太多的颜色，真彩色图像会被转化为索引色图像）2.选择最合适的过滤方式3.选择最合适的压缩策略以及选择性的减少颜色深度所有这些操作都不会影响到图像质量，却能减小 png 图像文件的大小，所以我强烈建议您每次保存 png 图像时都使用这些工具。
下面来介绍几种处理图像的方法，使图片更好的执行“线性过滤”。
1.色调分离
色调分离的优化方法已经广为人知。在Photoshop中打开样例图片，点击图层面板中的”创建新的填充或调整图层图标”，并选择色调分离：
选择尽可能小的数值（通常40就够了）并保存图片：
原图：84K
压缩后：53K
优化原理：
有效的减少色彩数，合并相似的颜色，创建出色调区域，更好的执行“线性过滤”，得到高压缩率。
这种方法有一定的局限性，尤其是优化的图片与 html 背景融合的情况下须慎用（蓝色为 html 背景）。
2.多余的透明
看看下面的图片：
75K
30K
两张图片都是用 Photoshop 导出的，而且没有经过任何优化。即使对比图中的每个像素，你都不会发现它们之间存在任何区别。但是为什么前者居然是后者的2.5倍大？
在探寻奥秘之前，你必须安装一个“Remove Transparency”的 Photoshop 插件才可以看到隐藏的细节。
在 Photoshop 中打开上面的两张图片，选择 Filer -> Photo Wiz -> Remove Trasparency。现在，你就可以看到保存在图像中的真实像素信息了：
这是怎么回事？其实很简单。带alpha通道的真彩色图像每个像素都用了4个字节来表示：RGBA。最后一个是alpha通道，控制该像素透明度：值为0则完全透明，255则完全不透明。这意味着每一个像素（任何RGB值）只要alpha值设为0就可以完全隐藏。但是这些RGB数据仍然存在，而且它不利于png编码器对数据流进行有效的封装和编码。因此，我们必须在导出图像前删除这些隐藏数据（例如上图中填充的黑色）。下面是一个比较便捷的方法：
1.在Photoshop中打开上面例子中第一张图片；2.Ctrl+单击（Mac系统中为 ？+单击）图层面板中的缩略图，建立选区 -> 单击选择栏目 -> 选中反向。
3.切换到快速蒙版模式，按Q键：
4.我们已经建立了一个半透明图像的蒙版，但我们只需要完全透明的图像。图像 -> 调整 -> 阈值，并将阈值色阶滑到最右端，从而使选区完全透明：
5.退出快速蒙版模式（按Q键），并用黑色填充选区：
6.再次反选（选择 -> 反向），点击图层面板的“添加蒙版”图标，添加蒙版。
对于上述这些操作我们只须了解即可，因为png二次压缩工具内已经内置了该项操作。
3.透明分离
有时候因为图片中存在一些半透明像素，你不得不保存一个“重量级”的PNG-24文件。如果将此类图像一分为二，一部分是不透明像素，另一部分则为半透明，然后各以适当格式保存。比如你可以用 PNG-24 格式保存半透明像素，而不透明像素则用 PNG-8 甚至 JPEG 格式保存。这样操作下来在实际应用中你将会节省很大的图片流量。看一下实际案例：
PNG24 62K
1.在图层面板中 Ctrl+单击（或 ？+单击）图像缩略图建立选区；
2.在通道面板中选择“将选区存储为通道”；
3.取消（Ctrl+D 或 ？+D）选区，选择新建的通道，然后打开阈值（图像 -> 调整 -> 阈值）。将滑块尽量向右拖动；
4.我们已经为不透明的像素创建了蒙版。现在利用这个蒙版来分离原始图层。Ctrl+单击（或 ？+单击）alpha1通道，转到图层面板，选择原始图层层，打开图层 -> 新建 -> 通过剪切的图层。这样我们就分离出了不透明和半透明像素。 现在你需要将这两个文件分别存储为不同的文件格式：不透明像素保存为 PNG-8，半透明像素保存为 PNG-24。针对半透明像素图层你还可以使用色调分离技术让文件变得更小。PNG-8 17KB
PNG-24 色调分离（色阶=35） 6KB
原图：63K
优化后：23KB
优化后的图片大小几乎只有原图的1/3，在原来的基础上能够节省2/3的流量。但是这种方法有一个明显的缺点：将一个图片分成两个图片，增加了重构人员的工作量，减少图片大小的同时却又增加了http连接数
灰度
Photoshop 不能保存灰度模式的 PNG 文件，所以你得在保存黑白图像后再使用 OptiPNG，代码如下：
optipng -o5 bw-image.png
灰度图像占用的空间远小于 RGB 图像，因为每个像素只用一个字节来表示，而不是三个：
PNG-24（Photoshop + OptiPNG → 灰度），6132字节
在保存图像为 PNG 文件之前，将其设置为灰度模式（图像 → 模式 → 灰度）非常重要，尤其是半透明图像（参见 Dirty transparency 的方法） 。
减少颜色
这个方法可以作为色调分离的替代方案。色调分离会严重改变图像的色彩，如果你要将图像嵌在网站背景中的话，这根本不可接受。这种方法能让你控制颜色更加自如，但也是限制在256色以内。
这个方法主要是从半透明图像中提取图像信息（即删除透明度），将其转换为索引颜色再应用到原始蒙版中。减少颜色数量利于文件的有效压缩。
1.在 Photoshop 中打开并且复制原始图像（图像 → 复制）。
63KB
2.从复制的图像中删除透明（滤镜 → Photo Wiz → Remove Transparency） ：
3.设置图像模式为索引颜色（图像 → 模式 → 索引颜色）。在新对话窗口中输入如下设置：
颜色：190 ，仿色：扩散，数量：80％。
4.图像模式设置回 RGB 颜色，并复制图层到原始文件中。将复制的图层对齐，并创建剪贴蒙版。现在保存为 PNG-24 文件：
51KB
如你所见，做些简单的步骤就可以节省下11KB，而且还没有任何质量损失。甚至这种方法还有一个好处：使用 OptiPNG 时能够获得更高的压缩率。而对于这张图像，它的大小被从51KB减小到33KB，压缩了36％。你可以保存为 Web 格式的文件并应用 Influence mask 来减低大小，而不必把图像转为索引颜色模式。
但是这种方法并不等同于在 Fireworks 中的调整 PNG-8 的透明度。在多数情况下，即使颜色数减少了，但仍会超过256色，所以你必须保存图片为 PNG-24，而非 PNG-8。要记住，不透明的红色和透明50%的红色是完全不同的两种颜色。
降低细节
这项技术对于优化阴影、倒影、发光等非常好用。记得在 Dirty transparency 中讲到，真彩色图像中的每个像素都用了四个字节来描述：RGBA。最后一个控制像素的透明度。对于 Alpha 值太低的像素（即像素只是勉强可见），你就可以替换 RGB 数据以取得更好的压缩效果。让我们试试吧。
1.再次在 Photoshop 中打开复古 iPod。
63KB
2.iPod 下方的倒影就是非常好的优化对象。Ctrl+单击 或 ?+点击 图层面板中的缩略图创建选区。到通道面板从选区创建新的通道：
3.我们必须选中那些勉强可见的像素。反相该通道（图像 → 调整 → 反相），然后打开阈值对话框（图像 → 调整 → 阈值） 。设置阈值为170就足够了：
4.这样我们就得到了只包括勉强可见的像素的蒙版。Ctrl+单击 或 ?+单击 通道创建选区。返回图层面板，选择图像图层，打开滤镜 → 杂色 → 中间值。这个滤镜将平滑选区中的像素，也就是说更利于压缩。设置半径为5：
现在存储图像为 Web 所用格式，PNG-24，文件大小已经从63KB减小为59KB了。你可以调整阈值和中间值，在提高压缩率与保存更多细节间平衡。
其它 PNG 的使用和优化技巧
1.每次优化都必须先彻底分析图像。再选用最合适的优化技术。
2.自主创新。以这些技术为基础，研究你自己的优化方法。
3.许多人认为，对于颜色较少的图像，PNG-8 总比 PNG-24 更适用。但是他们错了。有时候，PNG-24 反而更小：
PNG-8，833字节
PNG-24，369字节
在这张图像中，PNG-8 额外占用了空间：3个字节是用来描述颜色板中的像素，另外再用1个字节来描述图像数据流中的像素，而 PNG-24 总共只需要3个字节来描述。因此，如果图像颜色数较低，也没有透明，那么就该测试下 PNG-8 和 PNG-24 哪个更小。
4.如果您使用的是旧版本的 Photoshop（低于 CS3 ），你可能会发现，图像在图像编辑器与在网页浏览器中看起来不一样。这是因为 PNG 文件中存有伽玛值，可以控制图像的伽玛校正。（关于伽玛的相关内容，可以参考这篇文章——译注）你可以放心地将其删除，用 TweakPNG （仅 Windows 下）或 smush.it 都能做到。
5.有一种“特殊的” PNG 图像格式，可以在支持半透明的情况下，以索引颜色的 PNG-8 保存。Photoshop 不能保存这种图像（Fireworks 则可以），但可以先在 Photoshop 中编辑，然后再用 OptiPNG 转换。
OptiPNG 默认会将少于256色的真彩色图像（24位）转换成8位色。这么做的话，可以先应用“减少颜色”和“降低细节”技术，再“猜测”图像的颜色数。不过这样非常费时。PNGGNQ 工具可以将真彩色图像转为256色，但这样你就不能完全掌控图像了。
你必须减少颜色数到256色以下，包括半透明像素在内。这种格式之所以“特别”，因为它在 IE6 下会：
IE6
其他浏览器
你也看到了，IE6 只显示不透明像素。这种格式的好处是你可以使用标准的 <img> 标签，或把图片作为背景（即不使用巨耗资源的 AlphaImageLoader CSS 滤镜），但代价是 IE6下 的视觉效果非常糟糕。
6.不要使用“另存为”保存应用在网页上的 PNG 图像，而应该使用“存储为 Web 所用格式”。默认情况下，Photoshop 会将预览连同图像一起保存，这样文件就会稍大一些。
联系客服
