webp图片在html上显示,WebP 格式图片在实际项目中的使用方式

一、前言

关于 WebP 的支持情况，以及适用场景此处不做详细说明，具体见官方文档。

先说结论，目前 WebP 支持情况占比较大(数据如下)，在适合的场景下可以使用 WebP 格式图片来提高页面加载速度。支持的浏览器占比达到近90%(数据来源：Can I Use)

安卓系统下大部分浏览器已支持，而安卓系统在国内移动端系统中占比达80%(数据来源：statcounter)

目前使页面支持 WebP 格式图片有两种方式：前端开发过程生成对应格式图片并编写 WebP 相关代码(本文介绍)

服务器端支持生成 WebP 格式图片，前端编写相关加载代码(这部分未深入研究)

二、压缩效果

设置压缩质量为81时，可以在尺寸和质量两者间取得较好的平衡。(测试结果与图片类型以及色彩丰富度有关，具体的压缩质量可以根据实际情况自行调整)

三、在开发中如何使用？

1. html

标签会根据浏览器支持情况加载对应资源。

2. css

通过 js 检测当前浏览器是否支持 WebP 格式的图片(细节见下文 js 代码)，在 html 标签上动态添加类名 webp，根据浏览器支持情况加载不同格式的图片。.box {

width: 5.73rem;

height: 6.57rem;

background-image: url(../image