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

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

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

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

• PNGOUT(本文基准工具)
• Pngcrush
• OptiPNG
• PNGGauntlet
• Smush.it
• TweakPNG

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

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

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

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

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

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

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

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

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

虽然离开阿里巴巴已经一个月有余，但却未曾好好告别，以宣告自己一个时期的终结。我怀念这段时间的流逝，但比起工作，我更热爱我的生活，我也因此而回到了上海我的家继续普通的过生活。生活波澜不惊，和预想中并无二致，而我能如此平静地度日也皆因杭州之行。

我有太多人需要感谢，杭州的生活里太多人给了我帮助。当我离开之时，这山水之城俨然成了我的第二故乡。阿里巴巴是非常不错的公司，AliEpressUED是伟大的团队，我为我的团队深感自豪。

感谢团座，把我招了进去。电话面试的时候你只问了我两个问题让我印象深刻，直到最后我去到杭州也只是简单回答了这两个问题。我还有点怀疑是骗子，哪有这么简单草率扯淡的面试~ 我深切的感受到你找的是人，而不是某种技术。做第一个项目的时候，在我还在木讷地有点不知所措的时候，是你帮了我一把。谢谢你疏导我的各种混乱的思绪，虽然效果不大。团长开放了我来到阿里的契机，一个微微发福的霸气的领路人:)

感谢老头，各种意义上。生活、工作、情感上都给我的帮助和影响。看到你总能让我联想起“吹起凉风有吉他相伴”的情景，当然，那情景当真和你极不相合，只是我的错觉...也许像一个点，团队围绕着这个点像一个大家庭一样让人安心。你做的鱼很好吃，至于番茄炒鸡蛋因为太简单就不谈了~ 早点把你自己嫁出去吧，不然我都没心情谈恋爱了。

感谢小运，我伟大的导师。来杭州前帮我联系住处，来了之后又指导我的各种工作。低调、务实、经常蛋疼的你，看起来总是那么和HP有一腿——我一来你介绍我第一个认识的就是HP，你说你们是清白的有人信么？看圣斗士日语配音法语字幕，出口闭口蛋这蛋那的，我伟大的导师啊，我真心觉得您蛋疼的厉害...

感谢华仔，给我安排好了住处，使我一到杭州就能安然落脚。和你、小龙、MG12住在一起很愉快，感觉像一家人一样。特别感谢你对我生活的上的各种照顾，不时还开车送我一起回去，陪我一起打dota，还要为我的脱线担责。你一定会成为一个好爸爸的~

感谢MG12、母鸡、咸湿佬，不曾想到和你共事，之后在平时和工作中都受你照顾。话及项目，给了我很多鼓励，话及生活，给了我很多启发。祝你和某人早日修成正果，追上华仔是指望不上了，干掉猜猜吧，呵呵。

感谢鹏鹏，我入职后的第一个项目是在你的帮助下完成的，虽然简单，但不会让我像无头苍蝇那样乱飞。多谢你平日解答我提出的各种问题。你的自行车让我差点冲动到也败一回，不过最后还是悬崖勒马，已经烧上耳机的我再烧上自行车的话，就真一贫如洗了。我伟大的导师小运的好基友HP，好好待他吧，祝你们幸福~

感谢曾哥，让我们的伙食上升到新的高度，让我这个挑食的家伙天天吃大餐。谢谢你帮我代买了这么多书，让我这几年都不再缺书看。还有D50，为此我省去了很大一部分自己购置的麻烦。你分享的富文本编辑器心得我非常受用，还大幅度提升了插花会的福利。你得多吃点，我都已经开始长胖了，该轮到你了。

感谢high哥，你那些新奇设备总是给我一种“潮流就在身边”的错觉，干柴烈火的2周推倒传奇也是那么让人压力山大。摄影的教父，PPT的达人，伪耳机烧友...事实上，你还是阿里第一个在公司打招呼的陌生同事...毕竟一开始我就坐你傍边，一开始就受你照顾，多谢了！

感谢添添，帮我一起做完了商城的项目，和我一起打dota，打羽毛球。虽然你dota打的真心不错，不过羽毛球水准就太水了。我白喝了你这么多好茶，不过我这种外行人喝也真尝不出是啥味，当然后面是曾哥一手泡的，现在你既然已经要离开，估计以后的茶道就都要曾哥接手了吧。你煮的粥真心赞，不过后来我依样做出来后发觉也并不难，只是又一次吃多了就吃怕了，那次以后就再没自己煮过粥...

体内哥虽比我晚来，在很多方面都比我强悍的多，能担当，面对工程师连珠炮的弹屏仍是谈笑风声，很等霸气。多谢一直以来的关照，照顾好老头就靠你了~

至于斌龙么，就不感谢了~和周会上说的一样，我带你的时间虽然不长，但你在很多方面已经超过了我。对于能带你，而且你能出师独当一面，我为此感到非常自豪！勇敢的少年啊，快去创造奇迹吧！

还有前端团队的无论在或已不在的各位，博哥，许诺，白有钱，安全哥，帅哥，徐飞，阿波罗，3P哥，你们传奇永远留在我的硬盘里——事实上，我偷拍了相当数量的照片哟~也许50年后再拿来看看，想必分外怀念。

感谢和我奋战在一线的设计师团队，锋兄，如花，小磊，young，大师，娟姐，群剑哥，林林，文谨，祥光，每一次的设计都离不开你们的努力——有打趣说搞满屏幕圆角弄死我的，有一直问我这个行不行那个行不行的，还有一边自己叫苦还一边帮我叫苦的...祝各位才思泉涌，创意不绝！

感谢海外团队的Pual和Stephanie，特别是Pual，每次都和我们分享自己的心得让我们受益匪浅。还有交互团队的人贩子5key，多谢你的鼠标垫，很大很强大，我现在拿来垫显示器...萎缩的欧阳冠希，如果有机会，我会再和你用imba一较高下。风骚到无人能敌的猜猜——双腿从肚脐眼开叉的典范...用研的维宇兄，你与如花的台球之战，我其实更看好你啦~还有Lucy姐姐，我的各种事务劳您费心了，祝你早生贵子:)

UED的各位，好好保重。

当然，还有其他团队的各位：

感谢项目中各位工程师，黄琳，东升，晟哥，延超，王磊，张磊，严少，伟晨哥，感谢大家在项目中给我的帮助，对于我的各种脱线给予最大的支持。各位一丝不苟的精神感染了我，让我不自觉地掏钱买了水果- -，我不知道后来带头请水果的优良作风是否被发扬光大，我只是觉得我能请你们吃水果真的是我的荣幸。

感谢QA的再月，林斌，潇哥，安琪，你们的细致保障了项目的坚实。至今我还对自己的bug心有余悸，至今我还记得，我欠再月姐和林斌一人一杯辛巴克。走的匆忙都未来得及实现承诺，如下次遇到，请不要再推辞。

感谢关照我的运营团队，sam，monica，loli，丹同学，俊哥，黄少爷，琨哥，刘佳，丹琼，璐姐，珍姐，早哥，昂哥，山峰，娟姐，虽然平日和你们打交道甚多而且总是口口声声要搞死你们，都只是些玩笑。我的沟通和交流以及执行力都是和你们的交流里锻炼的。而且，sam，珍姐和琨哥还都请吃过饭，sam大叔更是3次之多，直到最后还要硬要请喝咖啡，我却连一顿都没请出来过，搞的我真心不好意思。

感谢关照过我的PD团队的水哥，太后，徐亮，李老板，你们及时的沟通和跟进，保障了项目的顺利进行——不时还见你们出个血啥的——不过那也是应该的瓦，哈哈哈哈~

最后，HR的蓉兄是相当特别的。时常出没在前端阵地，难道是为了缓和失调的男女比例么...谢谢蓉兄...虽然大家都这么叫你，但其实我很少这么做。

无论在与不在，我都会记着你们。再见，阿里巴巴，再见，我的朋友们。

BGM @ Donna Burke - Heavens Divide instrumental
BGM @ 梁邦彦 - 風の誓い

相对之前写的那群人的鼠标垫已逾5个多月，各种变化悄然发生，有些又悄然逝去。这里总是记录着一些，试图阻止某些无法挽回的消逝，但那也许只是一厢情愿的堕流。

我的桌上，依旧是双飞燕鼠标，改变的是鼠标垫。不过即使出现了如此华丽的一次升级，仍然无法让我摆脱穷人的光环...因为这块Razor是我从5key那边收购来的二手，换句话说就是——我买不起新的！此时的双飞燕已经和它的座驾显得不太相称，不过，鼠标升级又是件遥遥无期的事情，所以，不多想了~

然后是我以前的座驾，5RMB的alibaba特制“我愿意！你愿意吗？”鼠标垫。这块鼠标垫也陪了半年了，现在我把他转送给了他现在的新主人——勃哥。

隔壁幼齿90后前端小伙子用的是细纹Razor，和他那个看起来似乎非常般配但实际上已经半残废的鼠标，一眼看上去似乎还相当高档。但是，那根不入流的耳机线立即让他露出了马脚，无论是造型还是实际上的声音表现都非常山寨，给这张看似无比和谐的照片添上了刺眼的一笔~

添添这家伙开始整天嚷嚷着“看到dota就恶心”，结果手上的鼠标垫居然还是这副摸样...甚至毅然决然地把他以前那块地狱火转送给了我，但我很快再次转送给了一位没有鼠标垫的可怜的工程师。

我伟大的导师孕妇同学依旧是这么的独一无二，配合他孕妇之名，即使是鼠标垫也是圆的么...可惜鼠标太没追求，实在是丢了UED的脸。还是那句话，至少从容的从口袋里掏出一个双飞燕啊！至少不要让我这个用双飞燕的穷酸作者鄙视啊！

上次说MG12这块Razor是假的，结果经过证实，居然是真的！这种误会也怪不了别人啊，看着一个雷柏放在桌上旁边还配上个半露的USE接收器，楞谁都要怀疑下面这块鼠标垫的真假。雷柏的失败之处在于：不是名牌却当自己是，然后标上了一个如此醒目的logo——是品牌存在感太强？还是太弱？

如花哥的鼠标垫虽然不知名，但是质量却很好，价格也非常低廉。吐槽点在于——明明是巨蟹座的人却因为没货而来冒充天蝎座！我勒个去，有这么风骚的天蝎座么？不过把《阿里味儿》直接拿来垫显示器实在太good job了~

High的地狱火再次登场，但明显已经锐气不足。High最近的动作相比以前那是明显跟不上潮流，SR80，益达，这些平凡而毫无高贵特质的东西，本不应该出现在和高贵的High哥有关的照片里的！

峰兄的鼠标和鼠标垫都是这么的中规中矩，完全无法联想这种规则和视觉层面的关系。不过，旁边那一整包纸巾也许更能让人有联想以及更能说明问题，看来峰兄还是很费纸的。

上次猜猜的那款霸气侧漏的卫生巾造型的鼠标垫突然不见了踪影，现在他的桌上残留的是这样一种景象——wacom的巨屏继续着霸气侧漏......

又，又，又是块Razor...这里的鼠标垫要被Razor彻底占领了么？

我想应该不会有“三”了，随着人越来越多，以后搞个这样的页面估计要老长老长...既然都上了名单，各位就应该好好保护好自己的鼠标和鼠标垫，为HP的鼠标和鼠标垫默哀，希望这一列单里，不会再有人中招。

最后，留下一张刚刚整理干净的桌面。时间，空间，被记忆定格成影像之后，还真是显得异常，绚丽——尽管色彩本身，如此黯淡。

我这属于挂了羊头也不买狗肉，呵呵。新年给团队打个广告，欢迎有兴趣的同学看看~

用户体验团队招聘

• 地点：杭州阿里巴巴总部
• 学历：不限，作品和实力是你最好的证明
• 资历：不限，我们提供平台，无论你是应届生还是设计专家
• 英文：擅长是优势，不擅长是提升空间，不是障碍

我们要

• 大同 - 组织的内核要大同，无论团队大小，希望大家本性相近，有共同的核。
• 大异 - 基因库越大越好，所以，欢迎你带来挑战、带来创新、带来变异。
• Bottom-up - 网站人需要使命和方向，不需要过多管理，我的事我做主。
• Transparency - 透明就是力量，举例：2010 开始个人晋升报名评选全程公开。

招聘岗位

• 交互设计师、视觉设计师、前端工程师、用户研究员

详细请看阿里巴巴国际站UED招聘网站(23 December 2013: 好吧，时间过太久，站点都不存在了...链接已移除)

年底特别想写些东西，有时候会想是不是受了冲GMV的影响...

这档口新的年眼看就要来了，不过确实没有太多实感。于是乘着这么个时期，我感到了命运的强烈召唤，记录下团队的那些音荡的人的一点点趣事，以小见大 ，从鼠标垫看人品。想想都觉得“善假于物”是多么的具有说服力~

首先是自己的鼠标垫。像我这种人品一流的穷苦的可怜人，我的手里自然不会出现什么高级货色。双飞燕鼠标配上阿里自产自销的5块钱的鼠标垫，这种朴素的装备对于我而言都显得这么的奢侈！哦，天哪！我怎么这么没有追求...

尊贵的high哥用的是尊贵的罗技鼠标，还有虽然不知是不是山寨的但是也一样尊贵的不知名鼠标垫。这种未知的神秘感一样让我对他的尊贵敬仰万分。

鹏鹏表面上是个不动声色的人，其实骨子里也是让人讨厌的有钱人！看这正品razor鼠标垫，罗技游戏用鼠标，我却没看到过他拿来打过游戏。这是何等的浪费啊！

和上面的正货一比之下，下面钊哥那便宜的仿品就不值一提了，果断略过......

小运这个鼠标实在，哎，太拖UED后腿了！至少像我一样从裤兜里掏出个双飞燕啊！说起来，好歹是自己把公司配备的临时品给换了啊！不过鼠标垫还是很给力，Chrome的logo相当的有质感。这块鼠标垫应该是他这届D2大会抽中的奖品，早知道我也应该不择手段抢过来。后来taobao查了下还真没有，确实算的上是稀有了。

其实总是能找到惊喜，最后这个，就不多说了.....

翘首祈盼着明年，能有更多的高级鼠标，和，新奇的鼠标垫。

来到杭州，来到阿里巴巴，刚好过去了一周。回过头来的时候发觉博客好久没有更新了，而且巧的是永久链接居然顺延到444...

来到一个陌生的城市，身处一个陌生的团队，还有很多东西需要适应，所以这几天就忙得不可开交。尽管一开始工作量真的不大，难度也不大，但陌生的环境还是让我缩手缩脚:)

UED的同事们都非常照顾我这个新手。他们真的是一群非常音荡的人...感谢团长收留我，使得我在未来一年中可以体验下未曾体验过的艰精人生。也感谢指导我的小孕妇童鞋，让我能尽快了解工作环境和内容。

一周，还感觉不出什么，但是技术是相对停滞的，提升或者说转变的是别的东西。虽然一开始就知道mg12就在这里，不过没想到的是和他成了室友...

上一张山寨mg12的厕中照:)

真不知道以后忙起来是不是也会顾不上自己博客呢?希望不会是那样，呵呵。