WebP是什么

Fanly 问答 2017-05-11 15:52:56 阅读(...)

WebP 是由谷歌推出的新一代图片格式,在压缩率上比 JPEG 格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。

什么是 WebP 格式图片?与 JPEG、PNG、GIF 的优势有哪些?WebP 是由谷歌推出的新一代图片格式,在压缩率上比 JPEG 格式更优越,同时提供了有损压缩与无损压缩的图片文件格式,在质量相同的情况下,WebP 格式图像的体积要比 JPEG 格式图像小 40%。

WebP 图片

其实在网络传播中图片已经必不可少,现在的各个网站也都是图文并茂,图片也就成了流量的大头,不论是 PC 端还是移动端。虽然国民的带宽都在提升,但是与此同时各个网站以及对图片质量更高的追求,同样也使得体验没有较大的提升,这也是很多网站使用懒加载的方式载入图片,间接的可以提升网站的打开速度和用户体验。

但是这一切都还不够,如何保证在图片的高质量不降低的前提下缩小图片体积,成为了一个有价值和值得探索的并改变事情。如今对于 JPEG、PNG 和 GIF 这些图片格式的优化几乎已经达到了极致,而 Google 就给了我们一个新选择:WebP,开辟了一个图片格式的新局面。

什么是 WebP?

WebP,一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。

2010 年发布的 WebP 已经不算是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都可以看到 WebP 的身影,而 Chrome 网上商店甚至已完全使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂很多的项目中得到应用。同时也有一些针对 WebP 的图片格式转换工具,如 智图,iSparta 等。

WebP 格式主要也是针对于网站前端和客户端应用开发等,并不利于正常使用和传播环境。

WebP 的优势

WebP 除了压缩效果极好,图片质量能否得到保障?对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果。

PNG VS WEBP

更多测试及效果可以通过 Chrome 浏览器打开:https://isparta.github.io/compare-webp/index.html 查看

总结 WebP 的优势可以有以下三点

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

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

WebP 的兼容性与缺点

既然是一个相对较新的技术,所以对于目前市面上能否完美的兼容,其可用和实用性就变得很现实了,再好的东西如果没有好的兼容性,也是非常难以普及和被广泛使用的,同时也可能会增加使用和操作的难度。例如前不久子凡在泪雪网科普过的APNG 格式图片一样,没有被广泛使用起来。

根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。PC 端 chorme 10+(14 ~ 16 有渲染 bug)、opera 11+ 、safri 均支持 webp 格式图片,Firefox 也曾拒绝支持 WebP,如果你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,其他版本以及 iOS 都可以直接使用官方提供的解析库。

目前 WEBP 与 JPG 相比较,编码速度慢 10 倍,解码速度慢 1.5 倍,实际上对于绝大部分的网络应用而言,图片都是静态文件,所以对于用户使用只需要关心解码速度即可。

总结 WebP 大概有以下两个缺点

  • 编解码速度偏慢
  • 兼容性差,浏览器支持不全

写在最后

至于 WebP 的实际兼容性以及可用性大家还可以深度的去探索,相信很多的前端或者 APP 开发者可能早就已经研究甚至开始使用上 WebP 了,而泪雪网在这里也就只是给普通用户做一个科普,也就不做具体的分析和瞎捣乱了,子凡就装 X 到这里了吧!下次再见。。。

0个人收藏 收藏

评论交流

泪雪默认头像 请「登录」后参与评论
  1. 加载中..

相关推荐

  • 内部网 Intranet

    内部网是什么

    内部网(Intranet)指采用Internet技术建立的企业内部专用网络。它以TCP/IP协议作为基础,以Web为核心应用,构成统一和便利的信息交换平台。内部网可提供Web出版、交互、目录、电子邮件、广域互连、文件管理、打印和网络管理等多种服务。
  • Metasploit

    Metasploit是什么

    Metasploit是一款开源的安全漏洞检测工具,可以帮助安全和IT专业人士识别安全性问题,验证漏洞的缓解措施,并管理专家驱动的安全性进行评估,提供真正的安全风险情报。这些功能包括智能开发,代码审计,Web应用程序扫描,社会工程。
  • Web3.0

    Web2.0与Web3.0的区别是什么

    Web2.0侧重于交互,网络拥有数据,侧重于社区发展,表单是智能应用,是单点故障;Wb3.0侧重于去中心化和语义学习,实体拥有数据的所有权并进行共享,侧重于为用户赋能,表单是智能合约,是无单点故障。
  • My Cloud OS

    My Cloud OS是什么

    My Cloud OS是西部数码旗下NAS品牌的NAS操作系统。具备先进的安全更新、增强型数据隐私、经过优化的连接可靠性、现代移动端和 Web 应用程序体验和经过优化的照片/视频查看与分享功能。
  • My Cloud

    My Cloud是什么

    My Cloud是西部数据(WD)旗下的NAS品牌。My Cloud NAS软件生态系统,它具备先进的安全更新、增强型数据隐私、经过优化的连接可靠性、现代移动端和 Web 应用程序体验和经过优化的照片/视频查看与分享功能。
  • ChromeOS 操作系统

    ChromeOS是什么

    ChromeOS(原Chrome OS)是由Google设计基于Linux内核的操作系统,并使用Google Chrome浏览器作为其主要用户界面。ChromeOS主要支持Web应用程序,兼容Android应用程序和Linux应用程序。