关于webp图片格式初探

  • 时间:
  • 浏览:0

对于不同场景下 WebP 的使用,亲们总结了许多防止方案,如下:

1、若使用场景是浏览器,不还里能:

但如今对于 JPEG、PNG 和 GIF 哪此图片格式的优化几乎机会达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而 Google 给了亲们有十个 多新选用:WebP。

不管是 PC 还是移动端,图片老随后流量大头,以苹果苹果苹果 机公司 Retina 产品为代表的高 PPI 屏对图片的质量提出了更高的要求,如何保证在图片的精细度不降低的前提下缩小图片体积,成为了有十个 多有价值且值得探索的事情。

可见,在色彩数相对较少的前提下,无损压缩的效果要优于有损压缩;而色彩数太大 时,有损压缩效果要优于无损压缩,四种 分界点在 256±3000 之间。

根据个人实际的测试,发现 Animated WebP 的压缩效果较不稳定,在默认压缩配置下达不还里能 Google 官方提供的示例效果。但 Animated WebP 依然有太大 值得期待的空间,值得继续关注。

上方随后简单介绍了四种 图片格式的背景和应用,不过 “talk is cheap”,四种 格式优势在哪里?除了压缩效果极好,图片质量不还里能得到保障?这时要更理性客观的数据:

最终,得出了有十个 多正反面案例,从技术宽度分析不同的表情图标的优劣(强调一下是“技术宽度”,这里列举的表情都很赞 ^_^)。

在验证了业务可行性完后 ,WebP 又激发了亲们对另外许多方向的思考:既然它表现那么 优秀,不还里能进一步摸清其“秉性”,得到许多能在未来使用中遵循的指导方案?

今年 WebP 图片格式得到太大的关注,太大 团队也过后过后刚开始 布道,前阵子的前端圈“走进腾讯互娱前端技术专场”都不 相关专题。借此热潮,在这里把上一年的探索过程以及今年 WebP 新的发展并肩分享出来,并肩也期待更多的人将其应用于实际业务中。

但新兴的事物必然指在欠缺的地方,Animated WebP 指在的难题:

测试结论

AndroidQQ 下 PNG 和 WebP 各指标对比。

2010 年发布的 WebP 机会不算不算新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中都不还里能看后 WebP 的身影,而 Chrome 网上商店甚至已全部使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂太大 的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等,并肩都不 许多针对 WebP 的图片格式转换工具,如智图(http://zhitu.tencent.com),iSparta(http://isparta.github.io/)等。

于是,为了更深入了解 WebP 结构,亲们针对原创表情项目 “不同的表情图片,如何获得 WebP 的最佳压缩速率单位单位” 难题继续展开探究,主要从图片规格、色彩数(颜色数量)、参数配置十几个 维度进行:

科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速率单位单位提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天不还里能节省几 TB 的速率单位单位,页面平均加载时间离米 减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 3000TB 数据存储空间。

了解完静态 WebP,下面再了解一下动态 WebP(Animated WebP):2013 年 11 月 21 日,Animated WebP 终于取得进展,并在 Chrome32 Beta 中得到了支持。目前 Animated WebP 支持将 GIF 直接转加带 Animated WebP,机会将多张 WebP 图片组合成 Animated WebP。与传统的 GIF 图比较,Animated WebP 的优势在于:

探索四:压缩配置

那么 WebP 的采样区块会是十几个 ?亲们在许多因素保持不变的前提下改变图片规格,选用了 3000*3000 附太大个规格值,得到了许多数据。将数据可视化完后 不还里能看后凡是以 16*16 倍数(1300*1300、176*176、192*192、256*256)为规格的图片,有损压缩的比例都明显大于以 4*4 或 8*8 的倍数为规格的图片。

iSparta 是亲们组针对 WebP 和 APNG 四种 新型图片格式的转化而开发的一款桌面应用,直接图片批量转换为 WebP,并肩提供多种参数配置,欢迎体验。

这里列举有十个 多简单的测试:对比 PNG 原图、PNG 无损压缩、PNG 转 WebP(无损)、PNG 转 WebP(有损)的压缩效果。更多测试查看  https://isparta.github.io (请用 Chrome 浏览器打开)

测试二

可见除了 WebP 在解码时间与 PNG 有较明显差异(毫秒级别)之外,总体使用体验和 PNG 基本无差异。并肩也时要明确,移动设备的发展迅猛,硬件升级快,上一年的表现你爱不爱我在今年又有了明显的提升。太大 ,在 App 中使用 WebP 基本那么 技术阻碍。

现在难题来了:WebP 的支持度和兼容性如何?

测试一

3、转换工具:

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

不还里能发现,无损压缩表现很稳定,压缩质量越高,压缩效果也越好。而有损压缩在压缩质量设置为 75 以上完后 ,压缩效果反而减弱,甚至压缩后的图片体积会大于压缩前的体积。太大 得出以下结论:

结论:

探索二:色彩数

测试数据(帕累托图):

(Google 已和正在部署的 WebP 的产品)

可喜的是,直到今年,Google 对 WebP 依旧投入了持续的热情,2014 年的 Google I/O Event 中也老是再次出现了有十个 多介绍 WebP 应用的视频(https://www.google.com)。WebP 已絮状应用于全球流量消耗最多的 Google 产品中,你还有理由拒绝它吗?

压缩参数说明:

测试结论:

探索一:图片规格

为了得到无损压缩和有损压缩的最佳压缩配置,亲们通过对 900 张表情图片进行不同压缩配置的测试(大帕累托图表情图片的色彩数都不 256 色以上),得到下面的数据:

对 WebP 的研究缘起于手机 QQ 原创表情商城,机会表情包体积较大,在 2G/3G 的网络环境下加载较慢。同事小贝恰好机会 2013 Google I/O Event 了解到了 WebP,于是亲们便并肩过后过后刚开始 了没羞没躁的技术预研,期待在原创表情图片的质量与体积之间寻找最美的平衡。

随后又从色温、渐变与杂色、直线曲线、算不算时要描边上进行了分析,最后的结论即:

苹果苹果苹果 机QQ 下 PNG 和 WebP 各指标对比。

建议原创表情尽量控制颜色数在 256 色以内,采用无损压缩性价比最高。

在 JPEG 和 PNG 格式的选用经验不还里里能知道,对于色彩僵化 的图片,一般使用 JPEG 格式,而对于色彩单一的图片,使用 PNG 格式。可见色彩数会影响图片的压缩效果。于是亲们通过 Photoshop 中的色阶分离功能调整表情图片的色彩数,在许多因素保持不变的前提下对比不同色彩数对于 WebP 有损无损压缩的影响。

结论

2、若使用场景是 App,不还里能:

测试数据(帕累托图):

为了验证 WebP 图片格式的业务可行性,亲们从流畅度、解码耗时、CPU 使用、内存占用十几个 维度进行的分析,在开发同学们的帮助下得到了非常宝贵的测试数据:

WebP(发音 weppy),是四种 支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使哪此 PNG 文件经过许多压缩工具压缩完后 ,WebP 还是不还里能减少 28% 的文件大小。

不还里能得出结论:

原创表情不还里能考虑使用 “16n*16n” 的规格。目前原创表情选用的是 3000*3000 的规格大小,实际上选用 256*256 机会 192*192 能获得更高的 WebP 压缩速率单位单位,量级在千分之几。

探索三:色温、渐变与杂色、直线与直线、描边

通过阅读文献了解到 WebP 使用的是 Fancy 采样算法,既然是采样算法必然有采样区块,而 JPEG 的采样区块是 8*8,对于原始图片的长宽都不 8 的倍数,都时要先补成 8 的倍数,使其能一块块的防止,太大 对于 8 的整数倍的图片,压缩会更高效。

若果你在使用 Chrome32 以上的浏览器,不还里能点这里(https://isparta.github.io)体验。

根据对目前国内浏览器占比与 WebP 的兼容性分析,离米 有 3000% 以上的国内用户不还里能直接体验到 WebP,机会你的网站以图片为主,机会你的产品基于 Chromium 内核,建议体验尝试。若果你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,许多版本以及 iOS 都不还里能直接使用官方提供的解析库(Android 、iOS)。