前言
大体积图片容易造成请求阻塞，影响性能，遂对公司对象存储进行WebP优化，因对开发来说是无感知的，且能够实现优雅降级，所以是较为容易推动落实的。
如果文章对你有帮助的话，记得一键三连哟。有问题和疑惑的话也可以在评论区留言。我会第一时间回复大家，如果觉得我的文章哪里有知识点错误的话，也恳请能够告知，把错的东西理解成对的，无论在什么行业，都是致命的。
日常博客记录在语雀，欢迎关注 语雀文档。
WebP 是什么？
WebP是由Google公司开发的一种可提供有损和无损压缩的图片格式，可以大大压缩图片的大小，并且图片的质量和png、jpeg等相同。
效果
下面我们看下测试结果，效果还是很优秀的，差不多能节省一半多带宽（原图地址）。
| 格式 | webp | png |
|---|---|---|
| 大小 | 1.3MB | 3.7MB |
兼容性
截至到2022年年初，目前大约95.91%的浏览器支持WebP格式的图片，这个支持率已经非常不错了，完全可以应用到生产环境中，针对不兼容的情况下，我们也可以进行降级来处理。
腾讯云OSS为例
开启CDN加速
进入内容分发网络
开启图片优化
打开WebP自适应
图片地址使用加速域名
测试
live-server
npm install -g live-server代码
命名为index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>webp</title>
</head>
<body>
<img src="https://123-1253419794.file.myqcloud.com/4k.jpg" alt="">
</body>
</html>运行
live-server原来3.7M的图片已经压缩到1.3M
下个老版本的firefox60进行测试，还是正常加载的3.7M的源文件。
结语
经过测试，替换WebP后页面加载有20%左右提升，如果项目中有使用大量图片，那么使用WebP绝对能有较大的性能提升。
看了这么久了，辛苦了，不过我也写了很久啦，大佬不妨点个赞再走吧。😁😁😁
也可以看看我的其他文章，嘿嘿嘿
🎉 2022年元旦，我终于搞懂了原型和原型
🎉 13道隐式类型转换面试题，让你一次爽到底
🎉 ⌈2022⌋ JavaScript超详细循环总结
🎉 云闪付小程序前端不完全踩坑指北
🎉 巧用Node.js process隐藏项目重要参数
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。