About WebP

介绍

WebP 是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自影像编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。

WebP最初在2010年发布,目标是减少文件大小,但达到和JPEG格式相同的图片质量,希望能够减少图片档在网络上的发送时间。2011年11月8日,Google开始让WebP支持无损压缩和透明色(α通道)的功能,而在2012年8月16日的参考实做libwebp 0.2.0中正式支持。根据Google较早的测试,WebP的无损压缩比网络上找到的PNG档少了45%的文件大小,即使这些PNG档在使用pngcrush和PNGOUT处理过,WebP还是可以减少28%的文件大小。

WebP支持的像素最大数量是16383×16383。有损压缩的WebP仅支持8-bit的YUV 4:2:0格式。而无损压缩(可逆压缩)的WebP支持VP8L编码与8-bit之ARGB色彩空间。又无论是有损或无损压缩皆支持Alpha透明通道、ICC色彩配置、XMP诠释数据。WebP有静态与动态两种模式。

动态WebP(Animated WebP)支持有损与无损压缩、ICC色彩配置、XMP诠释数据、Alpha透明通道。

兼容

当前网页浏览器当中,Google Chrome和Opera原生支持静态与动态的WebP格式,而Google Chrome自12版开始支持WebP的渐进式解码功能。

此外所有可以原生播放WebM影像的浏览器,也可以透过javascript来显示WebP影像。又Pale Moon 26+浏览器仅支持静态的WebP图像。Firefox浏览器亦在65.0版本支持WebP图像。网页浏览器GNOME Web和KDE图片浏览器Gwenview也支持WebP。

图像软件当中,Picasa(从3.9版本起)、PhotoLine、Pixelmator、ImageMagick、XnView、IrfanView、GDAL、Aseprite和GIMP(2.10起)皆原生支持WebP格式。

苹果在macOS Sierra及iOS 10的早期beta版本中加入了WebP支持。而在2016年9月7日发布的iOS 10和macOS Sierra GM种子版本中却移除了WebP的支持。

效能

在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%

by Google

美中不足的是,WebP格式图像的编码时间比JPEG格式图像长8倍(但对于你,这几乎可以忽略)

优势

WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量

同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一

对比 PNG 原图、PNG 无损压缩、PNG 转 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)

科技博客 Gig‍‍‍aOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。

如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试

About WebP 的发布基于协议 AHdark Blog License。如欲对此文章内容此文章转载、修改或行使任何超出预览和分享性质的行为,请参考此协议。
暂无评论

发送评论 编辑评论


|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇