在 web 项目中使用 webp 图片

实践发现，在开发中，通过无痛方式加入 webp 支持，为支持 webp 的执行环境节省 50%左右的图片流量，相关webp 介绍

1. 起因

从今年农历年后开始，一直都在断断续续的做活动模板相关的工作。活动模板的特点就是为了衬托活动气氛，页面会做各种视觉设计，而且基本都是着急上线，基本上都是开发部门提供各种模板，让运营部门自己配图及内容，一般还是图片占绝大部分内容。PC 端还好，但是移动端发现经常有页面大小图片加起来达 300 多张，一次页面完全加载消耗流量达 5MB，对于一些大型活动，消耗更多。

这么多的图片出现在页面上，虽然我们做了懒加载，但是图片体积还是那么大，导致内容呈现时间不够及时。结合我们的现有条件，决定实施 webp 图片支持。

2. 方案

现有条件：我们有自己的图片存储、分发、转换、处理服务，现有图片输出，基本都是有前段为图片添加相应参数方式加入到页面上。

于是我们的方案就相对简单了：

web 运行环境检测，为支持 webp 的客户端启用 webp。
使用图片处理服务，将历史、新加入的 jpg 图转 webp。
网络环境检测，为不同的网络类型启用不同的图片质量。

2.1 web 运行环境监测

目前还有 google 系的浏览器支持 webp，所以我们监测环境来决定是否启用 webp。

webp 支持情况 webp支持情况

服务端：支持 webp 的客户端，会在 http header 中携带相应支持的 content type, 比如

Accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

通过检查 http request 头中是否带有 image/webp 标记，即可得到是否支持结果。

浏览器端动态检测：

var supportWebp = (function () {
  var __supportwebp = false
  ;(function () {
    var webp = new Image()
    webp.onload = webp.onerror = function () {
      __supportwebp = webp.height === 2
      webp.onload = webp.onerror = null
      webp = null
    }
    //高度为2的一个webp图片
    webp.src =
      'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA'
  })()
  return function () {
    return __supportwebp
  }
})()

2.2 网络环境监测

在客户端 App 运行时，可以通过 app 收集网络类型数据，但是在 app 外，只能通过浏览器的网络信息 api 来检查，获得的信息有限，具体可以参考 Network Information API

资源加载策略：在 2g 网络环境下，把素材宽高缩小一定比例，比如为正常的 50%，压缩率提高，可以显著缩小图片体积。在 3g 网络情况下，正常的图片加载方式，在 4g、wifi 的情况下，主动预加载图片，使图片能更及时的呈现。

3. 总结

目前 webp 的支持度以及挺高，在移动平台，Android 基本上整个平台都支持了， iOS 平台目前还只有 chrome 浏览器支持，当然，在自己的 app 里边，也可以采用引用第三方库的方式来启用 webp 支持。低版本 android 在从 png 转换为 webp 时，貌似存在一些问题，所以我们没有将 png 处理为 webp 格式。在近半年的使用中，基本上没有发生过问题，通过使用 webp，页面的加载速度得到显著改善。