WebP 相对于 PNG、JPG 有什么优势?

96
飞菲fly
2017.09.12 23:00* 字数 1407

转自知乎--https://www.zhihu.com/question/27201061学习了
webp探索之路 http://isux.tencent.com/introduction-of-webp.html留着学习

压缩力度相当大,但不支持safari是硬伤

WebP 在各大互联网公司已经使用得很多了,国外的有 Google(自家的东西肯定要用啦,Chrome Store 甚至已全站使用 WebP)、Facebook 和 ebay,国内的有淘宝、腾讯和美团等。


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

更多测试查看 WebP 示例 (PNG 转 WebP)**(请用 Chrome 浏览器打开)
可以得出结论:
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)**


科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。
至于 WebP 的兼容性,在国内,WebP 已经得到半数用户的支持了 Can I use... Support tables for HTML5, CSS3, etc**

同时在 Android 和 iOS 平台中同样有官方的解析库提供。如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。

作者:腾讯Bugly
链接:https://www.zhihu.com/question/27201061/answer/133992530
来源:知乎

目前网络中图片仍然是占用流量较大的一部分,对于移动端更是如此,因此,如何在保证图片视觉不失真前提下缩小体积,对于节省带宽和电池电量十分重要。 然而目前对于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,科技博客GigaOM曾报道,YouTube的视频缩略图采用WebP后,网页加载速度提升了10%;谷歌网上应用商店采用WebP后,每天可节省几TB的带宽,页面平均加载时间大约减少1/3;谷歌移动应用市场采用WebP图片格式后,每天节省了50TB的存储空间;2014年腾讯新闻客户端应用了WebP后,流量峰值带宽降低9GB,网络连接延时不变的前提下,平均图片延时和数据下载延时降低了100ms;2014年空间装扮也全量转换成WebP,带宽上也有显著降低。(虽然听说目前已转成SharpP格式…) WebP的优势在于它具有更优的图像数据压缩算法,在拥有肉眼无法识别差异的图像质量前提下,带来更小的图片体积,同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。

作者:Hsieh Yuan
链接:https://www.zhihu.com/question/27201061/answer/148981118
来源:知乎
先放一个 WebP 转换的示例链接,可以直观感受 WebP 在图片大小上的优势。
WebP示例链接(GIF、PNG、JPG转Webp)**


WebP,是一种同时提供了有损压缩与无损压缩的图片文件格式,派生自视频编码格式 VP8。WebP 最初在2010年发布,目标是减少文件大小,但达到 和 JEPG 格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google 开始让 WebP 支持无损压缩和透明色的功能。
根据 Google 较早的测试,WebP 的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些 PNG 档在使用 PNGCRUSH 和 PNGOUT 处理过,WebP 还是可以减少28%的文件大小。就目前而言,Webp 可以让图片大小平均减少70%。WebP 是未来图片格式的发展趋势。
WebP 的应用场景及优势:
客户端软件,内嵌了基于 Chromium 的 webview,这类浏览器中应用的网页是可以完全使用WebP 格式,提升加载渲染速度,不考虑兼容。
用 node-webkit 开发的程序,用 WebP 可以减少文件包的体积。
移动应用 或 网页游戏 ,界面需要大量图片,可以嵌入 WebP 的解码包,能够节省用户流量,提升访问速度优势:
对于 PNG 图片,WebP 比 PNG 小了45%。

相关推荐: 图片秒瘦 90%,WebP 转换技术让图片“薄如蝉翼”**

对于前排答案所说JPG转WebP体积变小质量基本肉眼无损其实很多场景都存疑。之前测试过把下载到的JPG格式漫画转成WebP的确有些是得到了比较理想的效果,但是不理想的情况也很多。默认的q80质量损失是真的无法忽略,q90才能达到基本肉眼看不到太大区别的最低限度,但是转换出来的体积就很飘忽不定。——有时候能得到比JPG小得多的体积,更多时候是相差无几,偶尔会比原图体积还大出很多。用较低参数压出来的JPG,至少在体积上是不输WebP的,没有必要再压一道,为了一点点的空间二次损失画质细节。

作者:苏维
链接:https://www.zhihu.com/question/27201061/answer/227541446
来源:知乎
对于JPG转WebP体积变小质量基本肉眼无损其实很多场景都存疑。之前测试过把下载到的JPG格式漫画转成WebP的确有些是得到了比较理想的效果,但是不理想的情况也很多。默认的q80质量损失是真的无法忽略,q90才能达到基本肉眼看不到太大区别的最低限度,但是转换出来的体积就很飘忽不定。——有时候能得到比JPG小得多的体积,更多时候是相差无几,偶尔会比原图体积还大出很多。用较低参数压出来的JPG,至少在体积上是不输WebP的,没有必要再压一道,为了一点点的空间二次损失画质细节。

前端学习
Web note ad 1