Tancy's Blog

性能优化之webP图片格式

WebP

什么是 WebP?

WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 官方的数据,无损压缩后的 WebP 比 PNG 文件少了 26% 的文件大小,有损压缩在具有同等SSIM索引的情况下WebP 比 JPEG 文件少25-34%的文件大小。WebP支持无损透明度(也叫做alpha通道),图片大小增加22%。支持动画格式Animated WebP 。

为什么用

线上有个活动页面[地址],打开一看其中的banner 就320多KB,整个页面加载457KB,如果就单单banner图片换成webp格式,整个页面的大小就只有181KB。

优化前

优化前

优化后

优化后

Banner部分

Banner部分

这种例子在我们线上还是普遍存在的,我们只要稍加改进一下就可以为用户,为公司省70%的流量费。

怎么使用

推荐使用以下的库文件,可以在手淘中跑的更好。

也可以根据自己团队的情况自己写这个组件,参考组件规范实现 地址

公司支持

  • Alicdn 在2012年就开始支持webp格式了。
  • 手淘(android,ios,h5)全面使用webp格式已经2年多了。

缺点

  • 更高的压缩比,意味着解压需要消耗更多的资源。
  • 兼容性问题。

参考文献


晓田 ronntx@gmail.com

2015-5-18