App竞品技术分析 （3）减小安装包的体积

1 从几件小事说起

　　春节在家帮姐姐的iPhone手机安装市面上形形色色的App，忘记她是使用4G流量包月了，于是在下载了10个App后，不但耗尽了流量，还按照0.3元/兆的价格扣了七八十元流量费用。后来我检查了这几个App的体积，发现每个App体积都是40-50M的样子，这让我很吃惊，因为我记得两年前这些App也就在10-20M的样子。

　　另一件记忆犹新的事情，是去公园景点游玩，当时公园门口有个活动“扫二维码下载App下单立减10元”，但是我发现下载这个40M的App要花费12元的流量，这样其实是要额外多花2元钱，所以“扫码立减”这件事情对于我这种小市民而言是很不划算的。

　　由此而得到一个结论，App安装包的体积一定要小，至少要比竞争对手的App体积小。

　　对于Android而言，国内的各大市场商店已经发现这个问题了，所以对于用户升级App，会为每个App提供增量下载的功能，所以App版本升级不再是几十M的流量，而只是下载1-2M的增量包就能升级到最新版本，这样就极大节省了流量。[1]

　　对于iOS而言，AppStore从iOS6开始提供增量更新功能。对于iOS 6.x和iOS7.0，只要有文件改动过，这个文件就会进入到增量更新包中，比如说1个10M的文件，只改动了1KB的内容，这个10M文件就会进入到增量更新包中，包还是很大。到了iOS7.1及更高版本，这个机制进行了改良，它会把这1KB的改动内容放到增量更新包中，从而极大的减少了增量更新包的大小，但是安装的时候会变慢，因为要把这1KB的改动内容合并到10M文件中，这是个很繁琐很费时的工作。[2]

　　尽管如此，以上种种措施只能解决升级用户的流量困扰，对新用户并无帮助。我们必须减小安装包的大小，才能吸引更多的新用户。

2 安装包为什么那么大

　　是什么让App安装包的体积变得如此之大？

　　我们在前面的章节看到了iOS和Android安装包的内部结构，对于可执行文件，我们无能为力；对于XML文件，这些文件在App打包压缩后会极大减小体积，所以也不用管它们；那么就只能在图片和音频文件上做文章了。

　　各位读者看到这里，都请停下手中的工作，检查一下自家App包中图片和音频文件的大小。图片但凡是大于1M的，都是需要瘦身的。对于500KB-1M这个区间内的，也有瘦身的可能。我研究过很多知名的App，其中有很多图片都在2-3M的样子，其实真没有必要，之所以这么大，是因为UI设计人员提供的设计稿就是这么大，开发人员拿过来也不看文件体积大小直接就往项目里放，久而久之，App包的体积就大了。

　　在众多App之中，我印象最深的是一款旅游类软件，它的所有图片都不超过100KB，甚至说50KB以上的都屈指可数。这是把极致做到家的表现。

　　接下来说音频文件，对于应用类App而言，我见到的大都是App推送时发出的声音，这个声音很简单，不应该超过10KB。但我在很多App中看到的音频，都在100KB左右。这是我们优化的一个方向。网上有很多这样的软件，可以对音频进行大幅压缩。

3 png和jpg的区别和使用场景

　　设计师曾经问过我，App为什么不使用jpg图片，因为同样的尺寸，png格式的图片要比jpg图片大很多。

　　众所周知，png有透明通道，而jpg没有，此外png是无损压缩的而jpg是有损压缩的，所以png中存储的信息会很多，体积自然就大了。

　　但是手机却偏偏对png情有独钟，会对其进行硬件加速，所以我们会发现，同样一张背景图，png虽然体积比jpg大但是加载速度却要快一些。

　　终上所述，对于App包中的图片，我们都使用png格式的，而对于要从网上加载的图片，考虑到流量以及下载速度，则使用jpg格式的，因为它有较高的压缩率，体积很小。

　　但是对于背景图、引导页，这种大尺寸的图片，我们还是倾向于使用jpg格式，虽然加载慢一些，但是体积小，减少了包的体积。我看过的App基本都是这么做的。

　　对于Splash广告图，就是那个每次开启App一闪而过的广告，由于我们隔三岔五就要从线上下载新的广告图并展示在Spalsh页面上，所以这里使用jpg格式的图片。

　　对于iOS，苹果规定启动页（Launch image）必须是png图片，否则审核时就会被拒。

　　Google后来发布了一种新的图片格式，WebP，它的压缩率比jpg更好，已经慢慢普及。Android自然是支持的，iOS想要使用这种格式的图片，需要在程序中引入WebP解码器。

4 Splash、引导图和背景图

　　通过对50多款App中的图片逐个分析，我发现有3种比较典型的场景，大多数公司的解决方案是雷同的：

　　1. Splash默认广告是体积最大的，而且对应不同机型，要做多套，根据我的经验，每张图控制在300-500k左右就可以了。分辨率再高，对于手机而言，看不出效果。

　　2. 引导图，设计师每次都会给几张高分辨率的图片，然后程序员不加思索直接放到App中，体积自然就变大了。其实，仔细观察，你会发现，为了保持风格统一，这些图片的背景都是一样的。所以我们完全可以这样做，比如说背景上有一只小兔子：

• 把背景与小兔子拆分成2张图片。如果另一个引导图的背景上有一只小鸭子，那么就只需要这张小鸭子的图片了，背景图可以复用。
• 根据分辨率，动态放置小兔子的位置，动态拉伸背景图，使之铺满整个屏幕。

　　3. 对于背景图，为了达到一种视觉效果，这张图片经常被添加虚化等效果，既然如此，没有必要做得太清晰，应该控制在50k左右，看到很多App中类似的背景图都在1M左右，实在没有必要。背景图一般使用jpg文件。