WebP优雅降级方法实现

WebP的介绍

WebP是一种同时提供了有损压缩和无损压缩的图片文件格式，截至今天，已经有96%的浏览器支持此格式（ caniuse.com/?search=web… ）。WebP的设计目的在于减少图片大小的同时保证图片质量。

同样的图片内容，不同的图片格式：

下面截图是咨询new bing得出的对比数据结果：

优雅降级处理

通过使用canvas的toDataURL方法进行判断

HTMLCanvasElement.toDataURL()  方法返回一个包含图片展示的 data URI 。可以使用 type 参数其类型，默认为PNG格式。

• 如果画布的高度或宽度是 0，那么会返回字符串“data:,”。
• 如果传入的类型非“image/png”，但是返回的值以“data:image/png”开头，那么该传入的类型是不支持的。
• Chrome 支持“image/webp”类型。

const isSupportWebp = function () {
  try {
    return document.createElement('canvas').toDataURL('image/webp', 0.5).indexOf('data:image/webp') === 0;
  } catch(err) {
    return false;
  }
}

服务端判断请求头

如果你使用的是nextjs，你可以在getServerSideProps方法中根据请求头信息判断浏览器是否支持WebP。

export const getServerSideProps = async ({ ctx }) => {
    const accept = req.headers?.accept ?? '';
    const isSupportWebp = accept.includes('image/webp');
    
    return {
        isSupportWebp,
    };
};

// 然后通过useContext的api把isSupportWebp注入即可

在less中使用

首先使用js判断是否支持WebP，支持的话就在根节点上添加名为support-webp的class，不支持就不添加该class。

在less中可以封装一个函数进行使用

.webp-bg(@url) {
    background-image: url(@url);
    .support-webp & {
        background-image: url('@{url}.webp');
    }
}

// 用法
.section { .webp-bg('../image/cat.jpg'); }

tsx中也一样的思路，可以做类似的封装实现

希望以上信息对你有帮助！😊