PNG的压缩和优化

有关PNG的压缩和优化的主题其实也算是前端相当常见的部分,只是当前端把大把大把的时间和精力放在代码上面的时候,往往总是忽视对于图片的很多效果立竿见影的优化,而之所以这里主要说的是PNG,是因为相比JPG和GIF,PNG有更多压缩的空间。

写此文的契机是前端时间正好回顾了一篇 sitepoint 上的老文,《PNG8 – The Clear Winner》,主要讲述如何使用fireworks创建和利用PNG8的半透明,并兼容老浏览器如IE6-。虽然这篇文章和本文并没有任何关系,却让我回想起一些渐渐被遗忘的知识,作为一个coder的不断coding中渐渐忽视的问题——PNG压缩。

压缩过程毫无技术性,使用诸如 PngOptimizer 或者 PNGOUT 等工具可以轻而易举地将Photoshop、Fireworks生成的PNG图像继续缩小。我几乎总是使用 PNGOUT,原因是使用过各种工具比较得出的结论——PNGOUT生成的文件几乎总是最小的。所以之后的讨论也是以PNGOUT作为基准的

当然在这里,我也额外罗列一些我曾经使用过的工具。所有工具其主页都有详细的使用和说明,所以这里也不再冗述。

AliExpress是我的老东家,我打心底里喜欢这家公司和我原属的团队。所以虽然已经离开,但仍不时看看曾经自己努力维护的网站。我有点惭愧在过去从未能想到去优化其首页的图片,只专注代码其实绝对让一个前端走进死胡同。

AliExpress的主页主要的sprite有三张,当前值以及压缩值如下表:

文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
top_v5.png 15111 12107 3004 -20%
spr_we_buyer_common.png 16516 11289 5227 -32%
sprite_home.png 11562 9824 1738 -16%

对于这3张 sprite,总共将节约约10K的图片大小。对于首页来说,是相当有意义的。我没有测试 detail 和 list 页,如果连带到这些页面的话,效果应该就更为明显。

之前就说过,这不是什么了不起的技术,只是想到了和想不到,仅此而已。因为我现在在携程打酱油,所以举得例子也和携程有关——今天(2011/10/17)我对携程的首页的PNG图片也全部都审查了一遍,结果是中文站首页的PNG几乎全部都压过,但却仍然有漏网之鱼——这也就是为什么说,人们容易忽视它,而不是不了解它。

文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
phone_list.png 22227 15172 7055 -32%

这张 phone_list.png 是用于底部携程无线的背景的,更是达到了22K,且不论这张图的原始基础是否有良好的压缩,至少直接用PNGOUT对着它都能压掉7K。对于首页来说,7K仍然有意义。

不过对于携程英文网站的测试让我颇为沮丧,因为还同时发现了一些其他问题,反推到中文站首页,这些小问题也一并存在。这里我仅仅讨论PNG的问题,列出几张大的PNG压一压的话,对这种一定要用大量图片来实现的设计,效果确是立竿见影的。

文件 原始文件大小(bytes) 压缩后(bytes) 体积减小(bytes) 减小百分比
bg_header110621.png 61372 53778 7594 -13%
un_bg_findbox.png 15191 11556 3635 -24%
un_form_elements.png 6941 4664 2277 -33%
un_bg_home.png 15171 11495 3676 -25%
un_btns.png 16301 12332 3969 -25%
btn_book.png 8497 7873 624 -8%
bg_book.png 7215 6522 693 -10%
un_bg_ad.png 4990 2355 2635 -53%

未列出全部,但已经压掉了25K,很可观了,特别是对于主页来说。

最后推荐阅读PNG优化里有名的 A guide to PNG optimization

虽然我也曾是个蹩脚的设计师,不过这恐怕是我成为一个前端以来,第一次如此关注图片而非代码。有些曾经的东西,偶然的随意拾起来,虽然可能不足挂齿,却可能真的是个宝——我拾起的不是PNG压缩,而是对过往努力的怀念,是一个时期的证明