共计 962 个字符,预计需要花费 3 分钟才能阅读完成。
前言
大体积图片容易造成申请阻塞,影响性能,遂对公司对象存储进行 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 暗藏我的项目重要参数