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

摘要:WebP 是 Google 发明的一种图片文件格式,这种格式的图片既可以像 JPEG 格式的图片那样实现有损压缩,也可以像 PNG 格式的图片那样具有透明度特性,但这种格式可以提供比 JPEG 或 PNG 格式更好的压缩效果。

WebP 是 Google 购买 On2 Technologies 后发展出来的格式,以 BSD 授权条款发布的一种图片文件格式,这种格式的图片既可以像 JPEG 格式的图片那样实现有损压缩,也可以像 PNG 格式的图片那样具有透明度特性,但这种格式可以提供比 JPEG 或 PNG 格式更好的压缩效果。

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

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

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

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

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

更多测试查看 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)

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

科技博客 Gig‍‍‍aOM 曾报道:

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

至于 WebP 的兼容性,在国内,WebP 已经得到半数用户的支持了,具体可以查看 https://caniuse.com/webp 的说明。

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

Caniuse 关于浏览器的数据,主要都来源于 Statcounter,此网站统计了全球以及各国的浏览器使用情况,但数据并不是实时更新。

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

版权声明:本文为博主原创文章,未经博主允许不得转载。http://www.dedenotes.com/html/webp.html
(1)
打赏 微信扫一扫 微信 支付宝 QQ 扫码打赏

HTTP消息结构 HTTP请求报文和响应报文的格式

Dedenotes 赞(3)

HTTP 协议(HyperText Transfer Protocol,超文本传输协议)是因特网上应用最为广泛的一种网络传输协议,基于 TCP/IP 通信协议来传递数据(HTML 文件, 图片文件, 查询结果等),所有的 WWW(World Wide Web)文件都必须遵守这个标准。

meta

Dedenotes 赞(3)

meta 是 html 语言 head 区的一个辅助性标签,位于文档的头部,不包含任何内容,标签的属性定义了与文档相关联的名称/值对。meta 标签可提供相关页面的元信息(meta-information),比如针对搜索引擎和更新频度的描述和关键词。

防止表单重复提交的 4 种方法

Dedenotes 赞(3)

平时开发的项目中可能会出现下面这些情况:由于用户误操作,多次点击表单提交按钮;由于网速等原因造成页面卡顿,用户重复刷新提交页面;黑客或恶意用户使用 Postman 等工具重复恶意提交表单(攻击网站)。