让 IE 与 Firefox 支持 WebP 图像格式

写了段 PHP 代码，自动从向日葵 8 号卫星的网站上抓取高清图并合成一张图。获取卫星照片的方法可以在这里看到。

但是…… 最终合成的 4d 分辨率（2200x2200）的 PNG 图片有 7 MB 多大，而且中美网络又频繁抽风，实际都要 1 分钟左右才能从我的服务器上加载完这张图片。

太慢了！

Google 提供了一种解决方案：WebP 图片格式。这种图片格式以无损压缩下极高的压缩比而著名。

把 7 MB 的地球照片 PNG 转换成 WebP，最终的文件大小是：700 KB 不到。对于一张分辨率 2200x2200 的图片来说，这个大小已经非常小了。

但是…… 以 IE 和 Firefox 为首的一些浏览器不支持 WebP，在这些浏览器上，WebP 图片是显示不出来的。所以，我们要在本地端加点处理，把 WebP 转换成浏览器支持的图像格式。

WebPJS 是一个在浏览器中完成上述转换的 Javascript 代码。它根据文件扩展名 **（很重要！）** 识别浏览器加载的 WebP 图像，并将它们转换成 PNG 显示在浏览器中。

要使用它，你只需要：

1. 下载 webpjs-0.0.2.min.js 和 webpjs-0.0.2.swf

2. 在网页的 head 里加入如下代码：

1
2
3
4

<script>(function(){var WebP=new Image();WebP.onload=WebP.onerror=function(){
if(WebP.height!=2){var sc=document.createElement('script');sc.type='text/javascript';sc.async=true;
var s=document.getElementsByTagName('script')[0];sc.src='你放这段代码的地址/webpjs-0.0.2.min.js';s.parentNode.insertBefore(sc,s);}};
WebP.src='data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';})();</script>

就搞定了。唯一的缺点是图片大时浏览器会卡个两三秒，不过相比于省下的传输时间，这点时间可以忽略不计。

回到向日葵 8 号卫星图片上面来。我的设置是让 PHP 合成图片之后直接输出 WebP 图像，也就是 URL 末尾是 .php 而不是 .webp。这种情况下 WebPJS 是识别不出这张图片的。怎么办？

假设你原来的 HTML 代码是这样：

1

<img src="himawari.php"/>

只需要在 himawari.php 后加一点东西即可：

1

<img src="himawari.php/这里输入什么都可以.webp"/>

网页服务器在接收到这个请求时，会查找 himawari.php/这里输入什么都可以.webp；当然，这个文件不存在。随后，服务器会查找 himawari.php，这个是存在的。服务器就会把请求交由这段代码来执行。

上面的 这里输入什么都可以 建议用当前时间或者要输出的图片的 hash 代替，以便在七牛之类 CDN 上实现缓存。