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压缩，而是对过往努力的怀念，是一个时期的证明。