Webp图片文件格式简介

作者: wxfeng 分类: web前端 发布时间: 2018-11-26 00:00

WebP (发音"weppy"),是一种同时提供了有损压缩无损压缩图片文件格式,派生自图像编码格式VP8 。是由Google购买On2 Technologies后发展出来的格式,以BSD授权条款发布,是Google新推出的影像技术,它可让网页图档有效进行压缩,同时又不影响图片格式兼容与实际清晰度,进而让整体网页下载速度加快。

由于目前互联网上传输的数据有65%都是图片,WebP就是出于减少数据量、加速网络传输的目的而开发的。为了改善JPEG的图片压缩技术,他们使用了一种基于VP8编码(已在2010五月开源)的图片压缩器,利用预测编码技术,同时还采用了一种基于RIFF的非常轻量级的容器。这种容器只会给每张图片增加20字节,但能让图片作者保存他们想要存储的元数据。与JPEG相同,WebP是一种有损压缩利用预测编码技术。但谷歌表示,这种格式的主要优势在于高效率。他们发现,“在质量相同的情况下,WebP格式图像的体积要比JPEG格式图像小40%。目前, Google放出了WebP文件解码器(libvpx)和命令行工具(webpconv),用于JPEG等格式图片与WebP格式之间的转换,不过系统支持暂时仅限Linux,Windows版本将在稍后推出。WebP团队还在开发WebKit内核补丁,用于在Google Chrome浏览器中提供对WebP格式的原生支持。美中不足的是,WebP格式图像的编码时间“比JPEG格式图像长8倍”。分析人士认为,尽管WebP格式尚未像JPEG格式那样,得到各种软硬件的广泛支持,但谷歌推广这一格式的优势在于Chrome浏览器。这款谷歌开发的浏览器的市场份额已达10%以上。

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 内核,建议体验尝试。

作者:知乎用户
链接:https://www.zhihu.com/question/27201061/answer/35637827
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

发表评论

电子邮件地址不会被公开。 必填项已用*标注