让 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 里加入如下代码：

<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 代码是这样：

<img src="himawari.php" />

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

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

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

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