当前位置 博文首页 > 文章内容

    七脉神剑:前端:WebP自适应实践

    作者:21344 栏目:未分类 时间:2021-11-25 22:08:00

    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 文件做处理,将 转为
    bkbky