最有效地使用PNG:PNGOUT优化

原文作者: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图像压缩效率高的有力证明!不过,我们可以做得更好!如果我们使用Ken Silverman的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。

 OptiPNGPNGOUT
267个PNG文件4.40 MB4.04 MB

工具运行耗费了一些时间,不过,我们为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%。何乐而不为呢?

发布了58 篇原创文章 · 获赞 1581 · 访问量 156万+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章