WebP为何那么受欢迎?

WebP格式,谷歌(google)开发的一种旨在加快图片加载速度的图片格式图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。Facebook Ebay等知名网站已经开始测试并使用WebP格式。 WebP 在各大互联网公司已经使用得很多了,国外的有 Google(自家的东西肯定要用啦,Chrome Store 甚至已全站使用 WebP)、Facebook 和 ebay,国内的有淘宝、腾讯和美团等。

Webp优势:

  • 更优的图像数据压缩算法
  • 更小的图片体积
  • 肉眼识别无差异的图像质量
  • 无损和有损的压缩模式
  • Alpha 透明以及动画的特性

Webp探究:

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

之前做过一个测试,对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果:

<img src="https://pic3.zhimg.com/9bfba760f53916e6a8a8c2458e0b1c36_b.jpg" data-rawwidth="798" data-rawheight="273" class="origin_image zh-lightbox-thumb" width="798" data-original="https://pic3.zhimg.com/9bfba760f53916e6a8a8c2458e0b1c36_r.jpg">

更多测试查看 WebP 示例 (PNG 转 WebP)

可以得出结论:

  • PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩
  • 转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)
  • 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题

经测试,JPEG 转 WebP 的效果更佳。13 年底 Google 正式推出 Animated WebP,即动态 WebP,既支持 GIF 转 WebP,同时也支持将多张 WebP 图片生成 Animated WebP。但是压缩效果未能达到宣传的那样。如果你在使用 Chrome32 以上的浏览器,可以点这里查看官方提供的实例: WebP 示例 (Animated WebP)

<img src="https://pic4.zhimg.com/19a50fe06a814b119b6ce9b7f3cb5fcf_b.jpg" data-rawwidth="797" data-rawheight="239" class="origin_image zh-lightbox-thumb" width="797" data-original="https://pic4.zhimg.com/19a50fe06a814b119b6ce9b7f3cb5fcf_r.jpg">

Webp案例:

YouTube的视频缩略图采用WebP后,网页加载速度提升了10%;谷歌网上应用商店采用WebP后,每天可节省几TB的带宽,页面平均加载时间大约减少1/3;谷歌移动应用市场采用WebP图片格式后,每天节省了50TB的存储空间;2014年腾讯新闻客户端应用了WebP后,流量峰值带宽降低9GB,网络连接延时不变的前提下,平均图片延时和数据下载延时降低了100ms;2014年空间装扮也全量转换成WebP,带宽上也有显著降低。(虽然听说目前已转成SharpP格式…)

Webp使用理由:

目前网络中图片仍然是占用流量较大的一部分,对于移动端更是如此,因此,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要。

然而目前对于JPEG、PNG、GIF等常用图片格式的优化已几乎达到极致,因此Google于2010年提出了一种新的图片压缩格式 — WebP,给图片的优化提供了新的可能。

WebP为网络图片提供了无损和有损压缩能力,同时在有损条件下支持透明通道。据官方实验显示:无损WebP相比PNG减少26%大小;有损WebP在相同的SSIM(Structural Similarity Index,结构相似性)下相比JPEG减少25%~34%的大小;有损WebP也支持透明通道,大小通常约为对应PNG的1/3。

同时,谷歌于2014年提出了动态WebP,拓展WebP使其支持动图能力。动态WebP相比GIF支持更丰富的色彩,并且也占用更小空间,更适应移动网络的动图播放。

WebP的优势在于它具有更优的图像数据压缩算法,在拥有肉眼无法识别差异的图像质量前提下,带来更小的图片体积,同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

在线图片格式转WebP:

https://www.upyun.com/webp

WebP 的应用场景及优势:

  • 客户端软件,内嵌了基于 Chromium 的 webview,这类浏览器中应用的网页是可以完全使用WebP 格式,提升加载渲染速度,不考虑兼容。
  • 用 node-webkit 开发的程序,用 WebP 可以减少文件包的体积。
  • 移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入 WebP 的解码包,能够节省用户流量,提升访问速度优势:
  • 对于 PNG 图片,WebP 比 PNG 小了45%。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏即时通讯技术

全面掌握移动端主流图片格式的特点、性能、调优等

图片通常是移动端应用流量耗费最多的部分,并且占据着重要的视觉空间。以大家最常用的即时通讯IM应用为例,应用中存在大量的图片数据往来(比如图片消息、用户相册、用户...

1112
来自专栏coding

python使用PIL给图片添加文字生成海报

那时的我,对于未来有很多遐想:写小说、写时评、写诗歌... 总而言之,就是成为一个文字工作者

2092
来自专栏吉浦迅科技

让NVIDIA Jetson AGX Xavier火力全开的秘密

之前我们写过让Jetson TX2火力全开的秘密,让大家知道命令行工具nvpmodel能够定义一组参数,从而有效地定义给定功率的性能。

2.1K3
来自专栏机器人网

PID控制原理:看完这个故事你就明白了

小明接到这样一个任务:有一个水缸漏水,且漏水的速度是不定的,但要求水面高度维持在某个位置,一旦发现水面高度低于要求位置,就要往水缸里加水。 ? 开始小明用瓢加水...

3335
来自专栏喔家ArchiSelf

嵌入式中的人工神经网络

人工神经网络在AI中具有举足轻重的地位,除了找到最好的神经网络模型和训练数据集之外,人工神经网络的另一个挑战是如何在嵌入式设备上实现它,同时优化性能和功率效率。...

1482
来自专栏机器人网

PID控制原理:看完这三个故事,你就明白了

一、PID的故事 小明接到这样一个任务:有一个水缸点漏水(而且漏水的速度还不一定固定不变),要求水面高度维持在某个位置,一旦发现水面高度低于要求位置,就要往水缸...

4013
来自专栏机器之心

专栏 | 百度PaddlePaddle的新特性与大规模稀疏数据分布式模型训练

百度深度学习框架 PaddlePaddle 自 2016 年开源以来,受到了业界的广泛关注,PaddlePaddle 社区更是汇集了一大批 AI 技术开发者。开...

1153
来自专栏生信宝典

Graphpad,经典绘图工具初学初探

大多数科研文章都离不开图表,尤其是图,熟悉一些绘图软件,并将图在文章和PPT中展示出来,是科研训练的重要内容。漂亮的文章配图能给自己的工作加不少分,生信宝典推出...

1801
来自专栏向治洪

关于webp图片格式初探

前言 不管是 PC 还是移动端,图片一直是流量大头,以苹果公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度...

1.6K10
来自专栏新智元

“穿墙透视”黑魔法来了!只需WiFi和智能手机就可实现

无线设备无处不在,无论是在家中,办公室里,还是在街上,人们沐浴在几千赫兹甚至太赫兹的射频频率中。

1073

扫码关注云+社区