前端: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;

2. 加载 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')

然后利用选择