最有效地使用PNG

标签：

原文作者：Jeff Atwood

说起互联网上使用的图像格式，通常来说也就这3种：JPEG、GIF和PNG。具体使用哪种格式，相对而言也很容易做决定：如果你要保存的是连续色调的摄影图片，那就选择有损的JPEG；如果你要保存的图片里有大量同色块（或者颜色相近的色块），那就选择无损的GIF或者PNG。如果你对这两类图像格式之间的区别还不甚了解，可以翻一翻我以前的一篇博文。不过，GIF与PNG之间的选择是没有争议的。PNG针对GIF做了极大的改进，是更加现代版的GIF；GIF已然被PNG淘汰了。除非你身处下面这两种场景，否则的话，你应该总是选择PNG（而不是GIF）：

1. 你想要一个动画。PNG不支持动画，GIF支持。
2. 你的图像极其小，差不多只有几百字节。根据我的经验，GIF文件大小在这种情况下会更小一些。

在任何其他情况下，PNG都是GIF的天然替代品。PNG还没有版权问题，它可以存储所有位深，支持Alpha通道，可以提供更加高效的压缩。PNG真是棒极了！不过，你还须了解PNG的几件事情，以便最有效地使用它。

让我们来看一个具有代表性的图像吧。我对CodingHorror.com这个网站做了一次截屏，连带着浏览器、透明效果以及阴影。ClearType字体渲染是开着的。这个图很好地混合了文字、图片和用户界面。采用无损的PNG文件格式是再好不过的选择了，因为这个图里有大片区域的同色块，它们之间的界限分明。这正是我们所希望的！

截屏的实际尺寸为1233 x 946。当我在Paint Shop Pro把它保存为24位的PNG文件时，我看到下面两种文件大小：

• PNG（交错格式） 288 KB
• PNG（非交错格式）   212 KB

于是，我们有了第一条经验：永远别保存交错格式的PNG文件。

• 仅仅是为了渐进式渲染，交错式PNG会增大35%；
• 渐进式渲染让人很困惑：图像一开始是模糊的，然后渐渐变清晰。Philip Greenspun一语道破，“读者无法判断图像何时加载完毕！”
• 标准的PNG为渐进式渲染提供了完美的解决方法，根本用不着交错格式。它们可以自顶向下，以一种很简单直接的方式渲染。

对于一张这么大而且细节丰富的图像来说，压缩到212 KB已经很了不起了。这也是PNG图像压缩效率高的有力证明！不过，我们可以做得更好！如果我们使用KenSilverman的PNGOUT（下载地址：http://advsys.net/ken/utils.htm）处理一下这两个文件，我们可以把它们压缩得更小：

• PNG（交错格式） 190 KB
• PNG（非交错格式）   190 KB

首先，请注意到，PNGOUT摒弃了交错格式。如果你的原始PNG图像是交错格式的，你可以预期文件尺寸会被大大减小。但即使你的PNG不是交错格式的，PNGOUT也可以把文件减小22 KB（也就是大约10%）。我知道，感觉也没有瘦身很多，但PNG是无损压缩啊！JPEG是有损的，因此当文件尺寸减小的时候，图像质量会越来越差。而PNG不会丢失任何图像细节，我们只是让它们更小了。同学们，这是免费带宽啊！还有比这更好的事吗？

为了看一看PNGOUT的真实效率，我对/images目录下的一个子集运行了这个工具。需要说明的是，这些图像之前已经优化过了；我定期对这个目录里的每一个文件都运行OptiPNG。

工具运行耗费了一些时间，不过，我们为PNG图像获得了额外9%的尺寸缩减，而这是使用OptiPNG未曾办到的。这怎么可能呢？

我刚听到Ken Silverman这个名字的时候，觉得似曾相识。Ken是PNGOUT的作者，他竟还是《Duke Nukem 3D》游戏渲染引擎的原始创作者，那时这位神童才18岁。

Ken是如此之出色，甚至John Carmack——《毁灭战士》和《雷神之锤》两款游戏的作者，在编程界被公认为神一般的存在——都尊敬他。难怪他的这个小小PNG优化器，能够横扫千军。非常看好他！

如果你在运营一个网站，不管网站规模如何，也不管你用了多少PNG图片，你都应该使用PNGOUT来减小它们的尺寸。PNGOUT还能顺便把现存的GIF图像转成更为优秀的PNG格式。这个工具用起来也极其方便！下面的这条Windows命令，就能批量优化一个文件夹里的所有PNG图片：

for %i in (*.png) do pngout "%i" /y

使用PNGOUT的优化过程并不是特别快，但这没关系。一次性的优化能够降低图像使用带宽10%～30%。何乐而不为呢？

最有效地使用PNG

标签：

原文地址：http://blog.csdn.net/happydeer/article/details/50473961