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 元素的特性,允许开发者列举出多个图片地址,浏览器根据顺序展示出第一个能够展现的图片元素,如
这里写图片描述
上面的示例在浏览器不支持 WebP 图片的情况下自动回退到 jpg 格式进行展示,但 picture 的支持程度还不是很完善,开发者可以根据需求决定是否进行使用。
这里写图片描述

(2)嗅探

嗅探的方式是指直接向浏览器中插入一段 base64 的 WebP 图片,检测图片是否能够正常加载,依据该方法进而判断支持程度,如官方给出的嗅探函数:
这里写图片描述
其中包含了对有损、无损、透明图、动图等 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 团队,我们将不断迭代前行,致力于打造极致的用户体验。

Brilliant Open Web

BOW(Brillant Open Web)团队,是一个专门的Web技术建设小组,致力于推动 Open Web 技术的发展,让Web重新成为开发者的首选。

BOW 将依托于【Open Web 开发者】公众号,为大家提供设计、开发、安全等 Web 相关知识和案例。同时,也非常欢迎有志于改变世界的你加入我们!

关注 OpenWeb开发者,回复“加群”,让我们一起推动 OpenWeb技术的发展!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/535891.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

百度主任架构师谭待:如何让不带团队的程序员负责重大项目?

演讲 | 谭待 整理 | 赵新龙、尾尾 谭待,百度主任架构师、百度搜索公司技术委员会联席主席。主要研究领域在分布式系统和搜索引擎,是百度BVC代理计算和Matrix私有云的主要设计者,两获百度最高奖。主持设计了百度新一代搜索架构,在…

Chrome Dev Summit 2017参会笔记

作者 | 高磊 编辑 | 尾尾 为期两天的 Chrome Dev Summit 2017 于 10月23日~24日在美国旧金山举办。由于我们近期和Google的合作较多,对Google的动作也比较关注,所以受邀参加了这次的Chrome Dev Summit (CDS)。本文是我在现场做的…

九个案例简述Web设计原则:简洁清晰

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。欢迎关注OpenWeb开发者,订阅《Web设计指南》。 前言 《Web设计指南》是专门为广大Web内容生态提供一套简单实用的设计指南&a…

大型网站HTTPS 实践(一)| HTTPS 协议和原理

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。本文就着重介绍了 HTTPS 协议涉及到的重要知识点和平时不太容易理解的盲区,希望能对大家理解 HTTPS 协议有帮助。百度 HTTPS 性能优化涉及到大量内容…

大型网站HTTPS实践:HTTPS对性能的影响

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS性能优化涉及到大量内容,从前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列的文章将…

PWA将带来新一轮大前端技术洗牌?

作者 | 彭星 编辑 | 尾尾 一、回顾历史:移动时代之初,Web遭遇两大枷锁 Web 在移动时代遭遇两大枷锁1.Web 在移动时代遭遇两大枷锁 当 Web 自信满满,步入移动时代之时,它还没有做好充足的准备。 回顾 2014 到 2015 年那段时间…

高级精致智能快捷的Web设计原则案例

作者 | 百度搜索用户体验中心 《Web设计指南》分为设计原则、基础规范两方面主要内容,同时会提供相应的实际案例及资源下载。关注OpenWeb开发者,回复“设计指南”,即可获取已发布资源。 设计原则之高级精致 简洁并不等于粗糙没有细节&#x…

Linux系列(一):简介与目录结构

1、Linux简介 1.1、起源 Linux出现于1991年,是由芬兰赫尔辛基大学学生Linus Torvalds和后来加入的众多爱好者共同开发完成 1.2、Linux特点 多用户,多任务,丰富的网络功能,可靠的系统安全,良好的可移植性,…

大型网站的HTTPS实践:基于协议和配置的优化

作者 | 百度HTTPS技术支持团队 百度已经上线了全站 HTTPS 的安全搜索,默认会将 HTTP 请求跳转成 HTTPS。百度 HTTPS性能优化涉及到大量内容,在前端页面、后端架构、协议特性、加密算法、流量调度、架构和运维、安全等方面都做了大量工作。本系列的文章将…

Hadoop的安装及配置

PS:最新安装教程请参考Hadoop的安装与配置(设置单节点群集)详细教程 1、Hadoop安装前准备工作: 在开始Hadoop安装与配置之前,需要准备的环境:Linux系统、配置JDK环境变量。 2、安装 我们可以到Apache Hadoop的官网ht…

在 PWA 中使用 App Shell 模型提升性能和用户感知体验

作者|潘宇琪 编辑|Daisy 在构建 PWA 应用时,使用 App Shell 模型能够在视觉和首屏加载速度方面带来用户体验的提升。另外,在配合 Service Worker 离线缓存之后,用户在后续访问中将得到快速可靠的浏览体验。 在实践过…

【转】超酷的 mip-infinitescroll 无限滚动(无限下拉)

写在前面 无限滚动技术(又叫做无限下拉技术)被广泛应用于新闻类,图片预览类网站。对用户来讲,使用无限滚动的页面有源源不断的信息可以预览,增加用户在页面的停留时长。技术上原理也很简单,在页面加载时加…

MongoDB(二):MongoDB的安装

这里以OSX系统为例,window和linux可以参考https://www.runoob.com/mongodb/mongodb-linux-install.html 1、我们使用 curl 命令来下载安装: # 进入 /usr/local cd /usr/local# 下载 sudo curl -O https://fastdl.mongodb.org/osx/mongodb-osx-ssl-x86_…

Postman接口测试(超详细整理)

常用的接口测试工具主要有以下几种 Postman:简单方便的接口调试工具,便于分享和协作。具有接口调试,接口集管理,环境配置,参数化,断言,批量执行,录制接口,Mock Server, …

【转】AB实验设计思路及实验落地

这篇文章会讨论: 1. 在什么情况下需要做 AB 实验 2. 从产品/交互角度,如何设计一个实验 3. 前端工程师如何打点 4. 如何统计数据,并保证数据准确可信 5. 如何分析实验数据,有哪些数据需要重点关注 6. 附:如何搭建…

【转】mip-semi-fixed 走走又停停

写在前面 MIP 中悬浮元素的特殊情况 其实组件上线已经有一段时间了,最开始看到这个需求是站长提交了一个这中功能的组件过来,不过看过代码立刻就想到了 MIP 页面的特殊性:从结果页打开的 MIP 页面,是嵌套在一个 iframe 之中的。…

【转】百度站长平台MIP引入工具使用心得

MIP引入主动推送流程 对于 MIP 站点改造好了,我们如何提交数据,并且 MIP 提交后,我们能得到哪些数据的反馈,在这里简单的写一篇文章,说一下。 改造 MIP,我们一般是添加了一个二级域名站点进行改造&#x…

Hadoop之HDFS应用

1、通过http://127.0.0.1:8088/即可查看集群所有节点状态: 2、访问http://localhost:9870/即可查看文件管理页面(在3.0.0中在之前的版本中文件管理的端口是50070,替换为了9870端口): ————进入文件系统 ————…

MIP ACCESS细节剖析

什么是 MIP ACCESS MIP ACCESS 由百度 MIP 团队开发的一种页面访问权限控制机制,能够允许网页发布者在页面元素中定义内容标记,并结合用户访问情况进行综合评价,从而展现或隐藏页面中内容,直至用户登录、订阅或付费后才能够查看隐…

Linux环境下Flume的安装

1、在官网http://flume.apache.org/download.html下载flume的压缩包 2、解压到指定位置并重命名 tar -zxvf apache-flume-1.9.0-bin.tar.gz3、配置环境并生效 #vi ~/.bashrc export FLUME_HOME/usr/local/APP/flume export PATH$PATH:$FLUME_HOME/bin #使变量设置生效 #sour…