关于Android图片资源瘦身的奇思妙想

分析大部分apk,可以发现在android中图片应用较多的主要包括jpg和png两种资源类型。对于颜色很多尺寸大的图片一般用jpg,主要适用场景是用于做背景展示,这类图片除了调整压缩参数做有损压缩外,无损压缩可优化的空间则一般不会太大。相对而言,png图片的应用场景更多,一方面是由于其拥有透明值,另一方面也因为其可以方便缩放(九宫格)。png这部分资源一般在apk中占用了比较大的体积,很多时候可以通过tinypng有损压缩减少颜色表来减少体积,但容易被像素眼的设计师挑战;另一种方案是无损压缩,常规方法包括转换为索引图片、改变编码方式、提升压缩级别等,相较而言体积小了但效果一样,本文也将就这一方面结合源码对其在Android的实践和问题进行阐述。

一.选择压缩工具

首先是选择压缩工具的问题,在这之前先看下系统是如何做的。android的aapt在编译阶段其实是会对png图片进行压缩的,用的则是libpng和zlib,这个可以用aapt的源码佐证:

  • 用libpng对图片进行预处理
  • 用zlib对预处理后的图片进行压缩生成新图片

可以看到aapt对图片的压缩等级使用了最高等级9,期间系统也会做颜色表转换,这样可以减少很大一部分图片的体积,但系统的压缩方案是不是完美无缺呢?目前常用的无损压缩大概有Pngrewrite、pngcrush、optipng、advancecom、pngout,参考了很多文章,得出的结果是pngout仍然是王者,毕竟是Ken神童(据说Doom and Quake的作者John都尊敬他,做游戏的肯定都知道John )写的。另外由于pngout可以很好的支持命令行,方便放到编译脚本中自动化,所以暂时选它好了。

二.实践案例

压缩工具选好了,第二步便是实验了。拿手Q为例,直接对手Q中的所有png压一遍,Pngout的速度确实一般,对4千张图片全部处理一遍大概需要13分钟,不过这个过程只需要在本地做一遍,所以可以忍受,但处理完的结果不理想,因为没什么效果,减小量为十几KB~~ 仔细分析得知这里面犯浑作怪的竟然是aapt,由于先调pngout再调aapt会导致压缩效果覆盖。那么可不可以关闭aapt呢? 查看aapt的参数,关于压缩相关的只有下面这两个参数:

其中crunch便是预处理资源了,但是没有关闭crunch的参数。。。。有点技穷了对不对。只能去源码中找灵感了,看aapt的源码:

google把它隐藏了,没有打印出来给用户~打开这个参数,在手Q中资源打包脚本处分别加入--no-crunch参数,便可以把系统压缩给屏蔽掉了,样式如下:

至于为什么设置了这个参数就可以屏蔽呢,其实源码调用过程如下:

第1步 (Main.cpp)

第2步 (Command.cpp)

第3步 (Resource.cpp)

终结: (Resource.cpp)

可是实验还没有结束,因为这样屏蔽掉会出现奇葩的景象,得到的手Q画面效果如下:

为什么呢?仔细分析发现九宫格图片被压出问题了,aapt在处理png图片时会判断是不是九宫格图片,如果是则做特殊预处理:

do_9patch其实主要的是九宫格信息弄出来,写入到info9Patch字段,并最终写入nptc的chunk中:

到这里又回到第一步为什么我说Ken是神童了,因为Pngout可以选择chunk进行压缩,所以解决方案便是:对于九宫格图片,我们单独拎出来,先用aapt的aapt crunch进行预处理得到npTc字段,再用pngout在压缩时调用"knptc"参数保护一下npTc块,这样便得到了正确的九宫格图片,安装包的效果图也就正常了。

三.总结

上面大概就是png无损压缩在android中应用的基本思路和遇到的问题,归纳为一句话便是:替换掉系统的压缩算法。如果你不嫌麻烦和喜欢折腾的话可以在你的apk使用一下,效果还是非常显著的。不改变安装包内图片像素内容,轻轻松松减少几百K体积,何乐而不为呢?

原创声明,本文系作者授权云+社区-专栏发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

编辑于

我来说两句

12 条评论
登录 后参与评论

相关文章

来自专栏刘笑江的专栏

微信读书排版引擎自动化测试

本文介绍了为解决测试的难题,如何逐步将人工测试步骤自动化,最终构建了一套微信读书排版引擎自动化测试流程。

2157
来自专栏喔家ArchiSelf

10行Python代码的词云

词云又叫文字云,是对文本数据中出现频率较高的“关键词”在视觉上的突出呈现,形成关键词的渲染形成类似云一样的彩色图片,从而一眼就可以领略文本数据的主要表达意思。

703
来自专栏腾讯移动品质中心TMQ的专栏

测试建模 :从尔康的鼻孔说开来,重要的用例写三遍

看完本文你会了解以下内容 1. 什么是SUT模型 2. 测试建模在工作中究竟是怎样一个过程 3. 从业务流程到测试用例我们忽略了什么 4. 测试建模会有哪些产出...

1785
来自专栏美团技术团队

大众点评App的短视频耗电量优化实战

前言 美团点评测试团队负责App的质量保证工作,日常除了App的功能测试以外,还会重点关注App的性能测试。现在大家对手机越来越依赖,而上面各App的耗电量,直...

4088
来自专栏CSDN技术头条

IMVC(同构 MVC)的前端实践

导语 随着 Backbone 等老牌框架的逐渐衰退,前端 MVC 发展缓慢,有逐渐被 MVVM/Flux 所取代的趋势。 然而,纵观近几年的发展,可以发现一点,...

2086
来自专栏微信终端开发团队的专栏

Android微信上的SVG

资源矢量化 “清晰”和“体积”的矛盾与麻烦 面对android的各种dpi某事,想要所有设备上的图片都能有最清晰的效果,就意味着每种dpi模式都必须提供一份对应...

2725
来自专栏数据科学与人工智能

【数据可视化】让效率“爆表”的49个数据可视化工具

工欲善其事,必先利其器。好的工具可以大大提升你的工作效率,并获得身边人的羡慕和赞赏。今天,我们就来向小伙伴们分享一大波非常实用的工具,武装你的大脑。 ▲图表类...

2767
来自专栏携程技术中心

干货 | IMVC(同构 MVC)的前端实践

作者简介 古映杰,携程度假研发部前端和 node.js 架构负责人。开源库 react-lite 作者。本文来自古映杰在“携程技术沙龙——新一代前端技术实践”上...

3495
来自专栏较真的前端

[译] 响应式脑电波 — 如何使用 RxJS、Angular、Web 蓝牙以及脑电波头戴设备来让我们的大脑做一些更酷的事

1908
来自专栏数据小魔方

rmarkdown+flexdashboard制作dashboard原型

R语言作为一门统计计算和数据可视化为核心特色的工具性语言,其在可视化领域或者说数据呈现方面有着非常成熟和系统的解决方案。

723

扫码关注云+社区