@Lenciel

Blog加速:使用WebP图片格式

这个 Blog 对本座来说,除开记录胡思乱想,最重要的作用就是保持和前端世界一点同步。最近打算在不使用 CDN 的情况下, pagespeed 跑到100分,所以做一些早就想做但是一直没空的改造,排在最前面的就是使用 WebP 格式放正文图片。

什么是WebP

WebP 是 Google 开发的新图像格式,旨在以可接受的视觉质量为无损和有损压缩提供较小的文件大小,Google 报告称自己使用 WebP 代替其他有损压缩方案实现了 30% 至 35% 的流量节省。自问世以来,已经有包括 Netflix、Amazon、Quora、Yahoo、Walmart、Ebay 在内的许多大公司在生产环境中使用 WebP 来降低成本并缩短网页加载时间。

目前它最大的问题是浏览器兼容性,根据 CanIUse.com 可以看到 Chrome 和 Opera 对 WebP 提供原生支持。 Safari、Edge 和 Firefox 已经试用 WebP,但尚未在官方版本中进行使用。

以我最近用过的一张图片为例,使用 WebP 的效果是非常明显的:

Vhost threshold

怎么办

既然不是所有用户的浏览器都支持,那么就得找到办法根据不同的浏览器展示不同的图片。万幸在浏览器和网站建立连接的第一个请求里面,会有一个声明浏览器能力的 Accept Header

于是,由于这个站是用 Nginx 来运行的,要做到这点分三步。

让服务器认识WebP

/etc/nginx/mime.types 里加上:

1
image/webp  webp;

根据访问者的请求头赋值变量

/etc/nginx/nginx.conf里的 http 段落里面加一个:

1
2
3
4
map $http_accept $webp_suffix {
  default   "";
  "~*webp"  ".webp";
}

这里的作用主要是,如果 $http_accept (更多信息可以查看 ngx_http_map_module)代表的访问者的头里面有 webp,那么 $webp_suffix 就赋值为 .webp,否则就是一个空字符串。

定义空字符串这种方法比较“硬编码”,但是这里不用 rewrite 来实现主要是出于性能方面的考虑:nginx的变量是 lazily calculated 的,所以使用这样的方式不会影响其他文件。

根据变量值返回

在 Nginx 的配置文件 server 段落里面加上:

1
2
3
4
5
6
7
# webp extension support if you are converting /uploads images to webp
 location ~* \.(png|jpe?g)$ {
   expires max;
   add_header Vary "Accept-Encoding";
   add_header Cache-Control "public, no-transform";
   try_files $uri$webp_suffix $uri =404;
 }

这里最主要的是 try_files 的部分:

  • 如果有原请求+“.webp"后缀的文件,就使用它返回
  • 如果没有,返回原来请求的文件
  • 如果都没有,返回404

更多 try_files 的用法可以看这里

批量生成WebP文件

重启服务器之后,就可以看到已经工作了。在使用 Chrome 进行访问的时候,WebP 格式的图片会加载。

Vhost threshold

至于如何批量把现有的图片转换成 WebP 格式,有很多工具可以用,需要考虑的是在服务器端完成,还是在本地完成。

卑鄙是失败者的通行证

最近有不少奇葩事儿发生,有本座亲历的,也有朋友遇到的。

有个别的,还请了律师。

这社会总让人怀疑,是不是卑鄙才是通行证。

我先说结论,那就是在现代社会,取得大成就的人基本不是卑鄙的人,相反,往往很懂得利他。

也许有例外,但是我想不起来。

有人想起来乔布斯,但我记得好像他是有病,跟牛逼顿一个科室的。

有人说不是有挺大的房地产集团老板猥亵幼童吗?

我们这里说的卑鄙,更多是下作,爱算计,为达成自己的目的心狠手辣。

犯法的人应该受到法律的严惩,卑鄙更多说的是做事昧良心。

别误会,我不觉得有良心的人很多。

萨拉马戈对自己所在的时代十分不满,他在书里写道:“我们都是混合物,一半冷漠无情,一半卑鄙邪恶”。

满世界基督徒对他这话颇有意见,那时候幸亏没社交网络,不然得被骂死。

事实上,互联网向人类展示的一个主要部分就是人类其实没啥良心。过去,只有名人或者专家才能够发布自己的意见。现在,每个人都可以随便对某事某人进行评价:于是以前人类假装出来的良心露出了马脚。

但我始终相信现代社会里,“小胜靠智,大胜靠德”。

之所以说现代社会,是因为scar同学说,李世民不就很卑鄙吗。

我觉得李世民不是个案。人类近现代以前的大部分历史里,成功意味着控制稀缺资源。人们通常通过斗争来取胜,并且是在零和游戏中的残酷斗争来获胜。

在大多数有这种历史观或者价值观的人看来,卑鄙不是障碍,反而可能是一种优势。所以你想起过往的著名人物,往往除开那些靠自己的头脑靠创新就脱颖而出的科学家、艺术家、思想家,大部分都有残酷无情的一面,除非你知道北周武帝宇文邕。

但这些随着历史推进都在逐渐改变。

越来越多的竞争不再是零和的。越来越多的人不是通过争取控制稀缺资源,而是通过创造新事物而获胜。

这当然可能是因为虽然我认识很多人,但基本只认识在某些领域的成功人士:创业者,工程师,学者,教授,运动员,企业高管,以及罗主任这样品学兼优的政府官员,于是造成了认知偏差,认为其他领域的成功人士都是一样的。

但我决定保持乐观。

以前我以为对冲基金经理挺卑鄙的,看完《亿万》之后,好像应该也有不少不是。

以前我以为大多数毒枭都是卑鄙的。看完《绝命毒师》之后,好像应该也有几个不是。

可能还是有一些领域被卑鄙的人统治着,但他们掌控的世界在不断萎缩。

为什么?首先卑鄙会让你变蠢。

这是我讨厌互联网公司“打仗”的原因。

人在“打仗”的阶段永远不会是处于最佳工作状态的阶段,因为“打仗”总是会出现各种情况。你不是通过一步步闭环一个具备整体设计的想法,而是通过各种办法,包括卑鄙的办法,来获得大量特定条件下的局部最优,最终获胜:这个过程里面卑鄙的人也许很有用。

而且战斗一旦开始,是没有办法停下来的:你想通过战略来获胜,仍然要去面对对手的各种手段,这对在乎自己大脑被用在哪里的人是非常痛苦的:你感觉自己的大脑转得很快,琢磨的却不是自己想要琢磨的事情。

没有哪个公司会通过打仗赢得最后的胜利:好的公司通过跑得更快更好,而不是停下来去打仗,来脱颖而出。

另一个让卑鄙的人失败的原因是他们无法让最优秀的人为他们工作。

他们可以聘请那些因为需要工作而忍受他们的人,但最好的人还有其他选择。

好的人对于公司特别是早期公司实在太重要。

我最近开始很认真地想这个问题是因为我打算搞个新公司。

我问很多朋友对我有什么建议的时候,发现大家的反馈很集中:你太清高/太爱惜羽毛/太在乎照顾别人,这让我一度以为这是他们同情我脑子坏掉了,在这样的外部环境下放着好好的工作不干出来创业,不好意思再骂我,就换个方式夸我(你看我也不高尚,挺不要脸的)。

直到有一个特别熟的朋友说:“我强烈不建议你自己做CEO,你不够卑鄙。”

这又让我想起来之前有一个研究星座的人说,天蝎特别适合做CEO,因为他们阴险。

于是我就想反抗几句。

建立任何伟大的东西,总是需要被一种精神内核驱动的。最终成为富豪的创业公司老板往往不是金钱驱动的,金钱驱动的人会把收购或者上市当成自己的终点,却往往跑不到终点。

我不止一次听创始人们说,创立的这个公司本身就是一个他要卖掉的产品。

每个人有自己的选择,我没有说这样就不好。

但能够跑很远的人是有其他东西驱动的,比如,改变这个世界。

它听起来很虚,《硅谷》专门嘲笑过这些人,但很多时候创业是需要这么盲目的爱的。

爱如果都不是盲目的,这世界也太讨厌了一点。

想通这些对我也是一个特别好的事情,因为我收到这么多希望我变得不那么理想主义的建议,总需要找点儿理由大大方方告诉自己爱咋咋地。

不仅如此,我现在还可以反过来教育别人,不要变得“卑鄙”。

因为长期来看,卑鄙只会带来失败。