WebP 在减少图片体积和流量上的效果如何?—— WebP 技术实践分享
作者 | Jackson
编辑 | 尾尾
不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题。而 WebP 技术的出现,为解决该问题提供了好的方案。本文将为大家详细介绍 WebP 技术,同时也会分享该技术在 MIP 项目)中的实践。
一、什么是 WebP ?
WebP 是由 Google 收购 On2 Technologies 后发展出来的图片格式,以BSD授权条款发布。目前已经在不同厂商之间进行了尝试,如Google、Facebook、ebay、百度、腾讯、淘宝等。
二、为什么选择 WebP?
1. WebP 的优势
WebP 在支持有损、无损、透明图片压缩的同时,大大减少了图片的体积。据统计,WebP 无损压缩后比 PNG 图片体积减少了 26%,有损图片比同类 JPEG 图像体积减少了 25%~34%,下面总结 WebP 在不同指标上所能获得的提升对比。
(1)体积和流量方面
根据业界给出的改造数据可知,改造 WebP 之后图片体积会降低很多,具体可参照 WebP 体积测试链接,同时也可参照下图。
在 MIP 项目)中,通过我们的本地测试获得的数据如下图所示。
从以上测试可知,如果将体积换算成带宽,WebP 不同模式下都会节省大量流量。科技博客 GigaOM 曾报道,谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。
(2)速度方面
图片的加载速度还要取决于网络时间,所以我们没有测试确定的数据,不过可以参考业界的数据:科技博客 GigaOM 曾报道,YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,页面平均加载时间大约减少 1/3。
2. 兼容性
目前来说,WebP 的支持程度也在不断上升,据 2017年10月12日在 can i use 上的查询显示,全球 WebP 的支持程度已经达到 73.64%,如下图所示。
而也正是因为这种天然的图片体积优势和发展趋势,MIP 团队也决定进行初步的实践尝试,以提升页面用户体验。
三、WebP 实践经验
1. 如何判断浏览器支持程度?
WebP 的判断方法在官方文档中进行了总结,大致分为 HTML5 picture、嗅探和Request Header三种方式,下面展开介绍这三种方式。
(1)HTML5 picture
这种方法不进行 WebP 支持程度的判断,而是利用 html5 picture 元素的特性,允许开发者列举出多个图片地址,浏览器根据顺序展示出第一个能够展现的图片元素,如
<picture><source type="image/webp" srcset="images/webp.webp"><img src="data:images/webp.jpg" alt="webp image">
</picture>复制代码
上面的示例在浏览器不支持 WebP 图片的情况下自动回退到 jpg 格式进行展示,但 picture 的支持程度还不是很完善,开发者可以根据需求决定是否进行使用。
(2)嗅探
嗅探的方式是指直接向浏览器中插入一段 base64 的 WebP 图片,检测图片是否能够正常加载,依据该方法进而判断支持程度,如官方给出的嗅探函数:
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {var kTestImages = {lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"};var img = new Image();img.onload = function () {var result = (img.width > 0) && (img.height > 0);callback(feature, result);};img.onerror = function () {callback(feature, false);};img.src = "data:image/webp;base64," + kTestImages[feature];
}复制代码
其中包含了对有损、无损、透明图、动图等 WebP 图片的嗅探,这是一种最为保险的方法。不过缺点也很明显,在图片类型不一且量级较大的情况下,前端并不能知道哪些图片是有损,无损,亦或是透明的,也没有办法对其中一种特定类型做特定策略,所以即使知道不支持该类型的 WebP,然而我们也没有办法主观的去做容错。所以这种方法只适合于图片类型单一的情况,如开发者知道所有图片都是有损的,或是动图等,有针对性的去处理。
同时在处理的过程中,为了提高嗅探效率,嗅探之后可以将结果以本地存储的方式进行保存,如cookie ,方便下次直接进行调用。
(3)Request Header
这种方式是较为符合标准的解决方案,浏览器在支持 WebP 图片格式的情况下,会在请求的 http header accept 中携带 webp/image 的字段,后端接收到请求之后可以按照该形式来判断是否返回 WebP 图片内容。
MIP 在实践中采用的是该方法,当用户访问 MIP Cache 上的页面时,不需要开发者替换图片,MIP Cache 根据 http header 自动决定是否返回 WebP 图片内容。
不过这个过程也依然有坑——国内浏览器层出不群,大部分都向标准化的方向靠近,但仍然需要一定的时间来跟进。所以,在实践过程中我们就发现了这样的问题:虽然 http header accept 中包含了 webp/image 的字段,但实际上是不支持 WebP 格式的(华为 MT7 自带浏览器),具体体现在动图(animation)的 feature 上。而相应的解决方案其实也很简单,就是在 WebP 图片加载失败后发起原图请求,让图片能够正确的展示在页面上,具体方式是通过 img onerror 函数执行对应逻辑。
2. WebP转换工具
WebP 的转换工具很多,主要包含了命令行和可视化界面两种:
(1)命令行
官方对于每一种 WebP 格式也分别提供了对应的转换工具,主要包含了cwebp、dwebp、vwebp、webpmux、gif2webp 等几种,开发者可以择优选择。
(2)可视化
页面也提供了不同可视化的软件进行 WebP 格式图片转换,如:iSparta。
四、总结
WebP 作为一种新型图片格式,不但能够节省流量,减少图片体积,一定程度上也可以优化用户体验。MIP 项目对于 WebP 支持目前已上线,大家可以浏览 MIP 页面进行体验。同时作为关注速度优化的 MIP 团队,我们将不断迭代前行,致力于打造极致的用户体验。
WebP 在减少图片体积和流量上的效果如何?—— WebP 技术实践分享相关推荐
- WebP 在减少图片体积和流量上的效果如何?MIP技术实践分享
作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题.而 WebP 技术的出现,为解决该问题提 ...
- WebP 在减少图片体积和流量上的效果如何?WebP 技术实践分享
作者 | Jackson 编辑 | 尾尾 不论是 PC 还是移动端,图片一直占据着页面流量的大头,在图片的大小和质量之间如何权衡,成为了长期困扰开发者们的问题.而 WebP技术的出现,为解决该问题提供 ...
- 云上拍客梨视频 基于阿里云的技术实践分享
摘要: 梨视频大部分的业务都选择了阿里云,其中一个主要原因是阿里云提供基于钉钉群构建的24贴身技术支持,刘隽表示,这种服务模式可以更充分.高效的对接需求,快速得到反馈,这也让梨视频的同学有信心去尝试一 ...
- 利用WebP来缩小图片体积
WebP vs 传统格式 WebP 无损图像文件比 PNG 文件小 26% 在等效结构相似性 (SSIM,structural similarity) 索引下,WebP 有损图像文件比 JPEG 图像 ...
- COS数据处理WebP压缩 | 减少70%图像大小
当前网络中,图片仍是占用流量较大的一部分,在网站的视觉效果和加载速度之间,我们始终面临着两难选择. 一个网站的内容,不仅仅只有文字,图片.动图.视频等众多元素都在帮助用户从我们的网站获取更多的信息,当 ...
- Optimizilla中文在线无损压缩JPG、PNG图片,不降低画质有效减少图片文件大小
长久以来,我都是使用 TinyPNG 来压缩要上传到网站的图片,后来 TinyJPG 出现后,支援的图片格式更加广泛,能将 JPG.PNG 格式压缩并减少 70% 左右的容量大小,而且肉眼看不出变化, ...
- 当TensorFlow遇上Kubernetes ---中兴通讯人工智能计算平台的技术实践
本文由 [FMI飞马网]原创,原文链接:当TensorFlow遇上Kubernetes ---中兴通讯人工智能计算平台的技术实践 分享一些关于大数据的干货:TensorFlow介绍.安装教程.图像识 ...
- 助力全站WebP ,阿里云云上FPGA 团队发布 WebP图片解决方案
摘要: 阿里云 WebP 图片解决方案的软件部分由联捷计算科技(CTAccel)提供,再整合上阿里云自身的FaaS (FPGA as a Service) 弹性计算平台,形成了完整的阿里云 WebP ...
- webp app推荐图片格式,更小更快减少oom
一.什么是 WebP? WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG ...
最新文章
- Ubuntu创建opencv工程并显示一张图片
- Vware Workstation pro 12|虚拟机
- python invalid literal for int_求助!运行出现错误“ValueError: invalid literal for int() ··...
- vi/vim文本编辑器的使用
- python决策树预测模型_「数据挖掘入门系列」数据挖掘模型之分类与预测 - 决策树...
- 操作系统:进程同步与互斥之生产者-消费者问题(含报告和源码)
- CAD如何在插入块时调整比例?
- Facebook登陆服务器校验,权限请求以及数据获取
- aspack的简单脱壳,望大牛勿喷。
- 阿里云存储oss依赖报错解决方法
- 还有什么软件可以测试苹果真假,哪个软件可以检测苹果6s手机的真假
- 立足小餐饮,“新名酒”江小白能走多远?
- “数说故事——香港城市大学AI联合实验室”筹备会议今日召开
- 为什么索引不支持模糊查询_美团王兴:淘宝为什么不支持微信支付?
- code 128 npm
- GTD待办事项管理器都有那些功能
- 安卓APP源码和报告——音乐播放器
- Docker私服硬盘满问题
- 戴维营第四天上课总结
- c盘爆满--如何清理电脑C盘
热门文章
- 走过小公司的坑之入职一周
- asp.net 动态创建TextBox控件 如何加载状态信息
- pku acm 2140 Herd Sums http://acm.pku.edu.cn/JudgeOnline/problem?id=2140
- WINDOWS下的squid
- c语言全段字符的类别,言语理解规律整理d0c.doc
- php bloginfo stylesheeturl,WordPress主题制作–bloginfo函数使用教程
- 数学教师计算机能力提升,深度融合信息技术,提升数学课堂魅力
- 使用说明 思迅收银系统_便利店收银使用的收银系统应该取决于什么?
- Collections.min()和Collections.max()的使用
- 服务器优化:Tomcat、JVM性能调优笔记