前端:WebP自适应实践

WebP介绍

WebP 是 Google 推出的一种同时提供了有损和无损两种压缩方式的图片格式，优势体现在其优秀的图像压缩算法，能够带来更小的图片体积，同时拥有更高的的图像质量。根据官方说明，WebP 在无损压缩的情况下能比 PNG 减少26%的体积，有损压缩的情况能比 JPEG 减少25%-34%的体积。

下图可以看出，相对于传统的图片格式，WebP 格式存在浏览器兼容性方面的问题。本文通过工程化的手段来实现 WebP 格式的自适应加载。

传统做法

为了在前端项目里用上 WebP 格式，并且兼容不支持该格式的浏览器，通常的做法是判断浏览器支持性，引入 WebP 图片或其他通用格式的图片。针对HTML、JS、CSS 三种引入图片的场景，有以下几种处理方式：

HTML

借助 标签自适应加载的特性，如下，WebP 格式放在 标签，用JPEG、PNG等通用格式做兜底。

<picture>

  <source srcSet="https://p3-imagex.byteimg.com/imagex-rc/preview.jpg~tplv-19tz3ytenx-147.webp" type="image/webp" />

  <img decoding="async" loading="lazy" src="https://p3-imagex.byteimg.com/imagex-rc/preview.jpg~tplv-19tz3ytenx-147.jpeg" />

</picture>

JS

通过 JS 判断浏览器是否支持 WebP，若支持则引入 WebP 格式的图片，若不支持则引入JPEG、PNG等通用格式。有以下两种判断方式：

1. canvas 判断

isSupportWebp = document.createElement("canvas").toDataURL("image/webp").indexOf("data:image/webp") === 0;

1. 加载 WebP 图片判断

function isSupportWebp(callback) {

    var img = new Image();

    img.onload = function () {

         var result = (img.width > 0) && (img.height > 0);

         callback(result);

    };

    img.onerror = function () {

        callback(false);

    };

    img.src = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';

}

CSS

首先需要判断浏览器是否支持 WebP 格式，若支持则在 HTML 根节点添加类名标识。

document.documentElement.classList.add('webp')

然后利用选择器的优先级做到 WebP 的自适应加载，CSS 中引入图片的方式做如下改动：

.img { background-image: url('https://p3-imagex.byteimg.com/imagex-rc/preview.jpg~tplv-19tz3ytenx-147.jpeg') }

.webp .img { background-image: url('https://p3-imagex.byteimg.com/imagex-rc/preview.jpg~tplv-19tz3ytenx-147.webp') }

自动化处理

当项目中有大量本地图片引入时，手动处理的方式就显得比较繁琐，除了要根据图片引入的方式分别处理，还需要事先将所有图片转为 WebP 格式。

考虑到前端项目大多由 Webpack 构建，因此，尝试开发一款 Webpack 插件支持将项目里的图片转为 WebP 格式并且支持图片格式自适应。

方案设计

首先需要将项目中的图片转为 WebP 格式，考虑到本地转换的耗时较大，这一步更适合放到云端来做，在云端处理图片的服务也相对成熟，大多数云服务厂商均有提供，且图片上传之后也可以显著减少打包产物的体积。

上传图片

第一步是收集项目中的图片文件上传至云端，file-loader 支持将 import/require() 引入的文件写入到目标文件夹并将文件解析为 url，所以可在 file-loader 的基础上进行改造，方案是：

1. 获取 loader 匹配到的图片文件，将图片上传至云端，在云端生成 WebP 格式的图片；
2. 将原始图片文件替换为图片服务生成的URL；
3. 若图片上传失败则降级为 file-loader 的处理流程，将图片传入输出文件夹。

插入标记

处理过程中有多个地方依赖浏览器对 WebP 的兼容性，所以需要有一个全局的标记。通过在 标签里注入判断代码，若浏览器支持 WebP 格式则在根节点添加"webp"类名标识，可以在页面渲染前获取浏览器对 WebP 格式的兼容性。

前端项目通常会用到 html-webpack-plugin，该插件可以协助创建 HTML 文件并自动引入 Webpack 生成的 bundle，插件中提供有多个 hook，如下图所示。为确保已经生成了 head 和 body 标签，可以选择 在 alterAssetTagGroup 阶段注入相关的判断代码。

替换图片

接下来则根据全局标识将图片替换为相应的 url。根据图片被引入的位置，分为以下两种情况：

1. 图片在 JS 中被引入。将图片模块替换为一段 JS 代码，根据类名标识返回 WebP 或者通用格式的图片 url ；
2. 图片在 CSS 中被引入。若在 CSS 模块中引入 JS 代码，一方面会执行出错，另一方面 css-loader 会在编译阶段执行这段代码，达不到在浏览器端判断 WebP 兼容性的目的，因此 CSS 部分需要单独处理。

处理CSS

处理CSS中引入的图片有两种方案：

1. 利用 CSS 选择器优先级。在 CSS 中有图片引入的类后边插入带 webp 类选择器的样式，原理同手动替换时处理 CSS 的方式。
2. 全量生成 WebP 版 CSS。即文件中引入的图片皆为 WebP 格式，在链接样式文件时判断根节点类名标识，引入 WebP 版 CSS 或原始 CSS。

第一种方案的缺点是改变了部分样式的优先级，可能会影响整体样式，因此采用第二种方案。

方案实现

本文的方案选择了火山引擎提供的 veImageX 图片服务来处理图片。veImageX 是火山引擎提供的图片整体解决方案，能够将图片转换为 WebP、HEIF、AVIF等多种格式 ，支持从图片上传、存储、处理到分发的完整流程。

图片上传到 veImageX 之后，可以快速接入 veImageX 的各项云端处理能力，如：裁剪、旋转、滤镜以及橡皮擦、内容擦除等多项 AI 处理能力，并且可以方便地通过更换 URL 后缀的方式获取不同格式的图片。因此，以下方案实现基于 veImageX 展开。

1. 接入 veImageX 图片服务，获取 accessKey、secretKey 以及服务ID，具体接入方式请参考说明文档；
2. Webpack 插件分为两部分，在 loader 里上传并替换图片，在 plugin 里生成 webp 类名标记并处理 CSS 中引入的图片。通过 Webpack loader 获取项目里的图片文件，借助火山引擎提供的 SDK 将图片上传至 veImageX，并将图片模块替换为服务生成的 url。基于 veImageX 改变 URL 后缀获取相应图片格式的特性，根据图片被引入的位置做不同的处理。

如下，JS 中引入的图片根据浏览器兼容性来判断，CSS 中引入的图片则返回通用格式。

result = `var ret = '';

if (typeof document === 'object') {

var format = '';

document.documentElement.classList.forEach(item => { if (item.match(/__(\w+)__/)) format = (item.match(/__(\w+)__/))[1]})

if (format) {

  ret = "//${formatDomain}${imagexUri}~${options.template}${urlParams}." + format;

} else {

  ret = "//${formatDomain}${imagexUri}~${options.template}${urlParams}.image";

}

} else {

ret = "//${formatDomain}${imagexUri}~${options.template}${urlParams}.image";

}

${esModule ? 'export default' : 'module.exports ='} ret`;

该部分单独封装成了veimagex-webpack-loader，支持将项目中的图片上传至 veImageX，不需要 WebP 自适应能力的可直接使用该loader。

1. 在 html-webpack-plugin 的 alterAssetTagGroup hook里插入浏览器 WebP 兼容性判断的代码，这部分代码在浏览器端执行，若浏览器支持 WebP 则在根节点添加"webp"类名标识，如下：

compiler.hooks.compilation.tap('ImagexWebpackPlugin', function (compilation) {

    const hooks = self.htmlWebpackPlugin.getHooks(compilation);

    hooks.alterAssetTagGroups.tapAsync(

      'ImagexWebpackPlugin',

      self.checkSupportWebp.bind(self)

    );

  });

ImagexWebpackPlugin.prototype.checkSupportFormat = function (

  htmlPluginData,

  callback

) {

  htmlPluginData.headTags.unshift({

    tagName: 'script',

    closeTag: true,

    attributes: {

      type: 'text/javascript'

    },

    innerHTML: `

      var isSupportFormat = !![].map && document.createElement('canvas').toDataURL('image/${this.options.format}').indexOf('data:image/${this.options.format}') == 0;

      if (isSupportFormat) document.documentElement.classList.add('__${this.options.format}__');

    `

  });

  callback(null, htmlPluginData);

};

1. 对于 CSS 文件的处理是全量生成 WebP 版 CSS 的方案，所以在 alterAssetTagGroup hook里还需要对 引入的 CSS 文件做处理，将 转为