关于webp图片格式初探

  • 时间:
  • 浏览:0

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

压缩参数说明:

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

结论:

测试数据(每项):

测试结论:

需要得出结论:

但新兴的事物必然指在严重不足的地方,Animated WebP 指在的间题报告 :

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

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

在 JPEG 和 PNG 格式的选则经验上需要知道,对于色彩冗杂的图片,一般使用 JPEG 格式,而对于色彩单一的图片,使用 PNG 格式。可见色彩数会影响图片的压缩效果。于是亲戚亲戚亲戚亲戚朋友通过 Photoshop 中的色阶分离功能调整表情图片的色彩数,在某些因素保持不变的前提下对比不同色彩数对于 WebP 有损无损压缩的影响。

现在间题报告 来了:WebP 的支持度和兼容性怎样才能?

测试一

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

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

测试数据(每项):

我希望你在使用 Chrome32 以上的浏览器,需要点这里(https://isparta.github.io)体验。

对于不同场景下 WebP 的使用,亲戚亲戚亲戚亲戚朋友总结了某些外理方案,如下:

1、若使用场景是浏览器,需要:

于是,为了更深入了解 WebP 结构,亲戚亲戚亲戚亲戚朋友针对原创表情项目 “不同的表情图片,怎样才能获得 WebP 的最佳压缩数率” 间题报告 继续展开探究,主要从图片规格、色彩数(颜色数量)、参数配置几条维度进行:

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

3、转换工具:

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

测试结论

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

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

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

但如今对于 JPEG、PNG 和 GIF 哪几种图片格式的优化几乎原因分析分析达到了极致, 若想改变现状开辟新局面,便要有釜底抽薪的胆量和气魄,而 Google 给了亲戚亲戚亲戚亲戚朋友一一一三个新选则:WebP。

探索二:色彩数

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

为了得到无损压缩和有损压缩的最佳压缩配置,亲戚亲戚亲戚亲戚朋友通过对 900 张表情图片进行不同压缩配置的测试(大每项表情图片的色彩数否是 256 色以上),得到下面的数据:

根据对目前国内浏览器占比与 WebP 的兼容性分析,合适有 3000% 以上的国内用户需要直接体验到 WebP,原因分析分析你的网站以图片为主,原因分析分析你的产品基于 Chromium 内核,建议体验尝试。我希望你打算在 App 中使用 WebP,除了 Android4.0 以上提供的原生支持外,某些版本以及 iOS 需要直接使用官方提供的解析库(Android 、iOS)。

在验证了业务可行性随后,WebP 又激发了亲戚亲戚亲戚亲戚朋友对另外某些方向的思考:既然它表现越来越 优秀,需要进一步摸清其“秉性”,得到某些能在未来使用中遵循的指导方案?

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

探索一:图片规格

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

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

2010 年发布的 WebP 原因分析分析不否是新鲜事物了,在 Google 的明星产品如 Youtube、Gmail、Google Play 中需要都看 WebP 的身影,而 Chrome 网上商店甚至已完整版使用了 WebP。国外公司如 Facebook、ebay 和国内公司如腾讯、淘宝、美团等也早已尝鲜。目前 WebP 也在我厂不多不多的项目中得到应用,如腾讯新闻客户端、腾讯网、QQ空间等,一起去否是某些针对 WebP 的图片格式转换工具,如智图(http://zhitu.tencent.com),iSparta(http://isparta.github.io/)等。

AndroidQQ 下 PNG 和 WebP 各指标对比。

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

越来越 WebP 的采样区块会是几条?亲戚亲戚亲戚亲戚朋友在某些因素保持不变的前提下改变图片规格,选则了 3000*3000 周围多个规格值,得到了某些数据。将数据可视化随后需要都看凡是以 16*16 倍数(1300*1300、176*176、192*192、256*256)为规格的图片,有损压缩的比例都明显大于以 4*4 或 8*8 的倍数为规格的图片。

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

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

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

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

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

探索四:压缩配置

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

结论

原创表情需要考虑使用 “16n*16n” 的规格。目前原创表情选则的是 3000*3000 的规格大小,实际上选则 256*256 原因分析分析 192*192 能获得更高的 WebP 压缩数率,量级在千分之几。

测试二

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

2、若使用场景是 App,需要: