前言
大体积图片容易造成申请阻塞，影响性能，遂对公司对象存储进行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暗藏我的项目重要参数