|
App大小是受产品经理关注的，因为部分用户会由于下载时间、流量耗费等而倾向于较小的app，这点尤其在网络速度较差或资费较贵的国家比较明显，比如印度。 有不少的app，其中占空间最大的是资源文件，通常是图片。 我们最近的一个app就比较关注图片资源的大小，并有了以下几点的经验，包括iOS和Android。 1. 不用图片实现 有些简单的图形，是可以通过一些简单的编程做出来的，比如分割线、四周圆角。 在iOS里，一些简单的折线用Bezier Path也可以很容易的画出来的。 当然这里要有个限度，太复杂的图形，用代码来实现，很不好理解，倒不如用图片来得直接。 2. 清除掉没有用的图片 开发的过程中，某个功能改变或不要了，开发人员经常忘了删除掉不用的资源，它们就这样遗留了下来。 这些对用户没有用处，应该清除掉。 iOS方面，我只用过一个工具叫fauxpas，我相信应该还有其他的。 要注意的是，这些工具有可能会误报，原因是我们有可能是通过动态的方式构造要加载的图片资源，所以这些工具判断不出来。记得在删掉图片资源前要小心确认。 插一句，关于上面提到的fauxpas，它是收费软件，有三十天试用期。如果只是用来清除图片，试用一下就足够，但它同时也提供了很多很好的提升app质量的检测，值得购买来长期用。 3. 用矢量图代替部分图片 现在的屏幕分辨率越来越高，iPhone有了3倍大小图片，Android的则往xxhdpi/xxxhdpi一路上去。 矢量图片是个很好的解决办法，它能不失真地放大。不过它无法完全替代点阵图，因为它只支持一些形状。 通常简单图形方面（比如图标）就很适合用矢量图。 提到矢量图，通常是SVG。iOS和Android都需要通过第三方library来支持，比如： iOS：https://github.com/SVGKit/SVGKit Android：https://code.google.com/p/androidsvg/ 同时，iOS和Android分别有自己的矢量图支持。 iOS：支持矢量图做成的PDF，具体见这里的介绍文章。要注意，PDF是有个初始大小的，iOS在把PDF转为图片时是根据这个大小信息来生成1倍/2倍/3倍大小的图片，而不支持我们自己无失真放大。 Android：在5.0上引入了矢量图的支持，是通过xml的resource方式，具体见这里。我没用过，但感觉这样的方式很不友好，要是能指定一个svg的资源文件就好了。 4. 优化点阵图 点阵图，通常我们用的是PNG。当我们从PS中保存一张图片为PNG后，这图片实际上还有优化空间的。 iOS项目的默认配置是有优化png的，但那效果貌似很一般。所以我们可以借助别的其他工具来优化，记得要同时禁用掉配置里的优化png选项。 我们用了一款叫ImageOptim的，效果很不错。 用正在开发的App做测试，未优化前图片的总大小是13.1M，优化后是2.9M。打包成App后，未优化前的app是19.7M，注意这时png被xcode优化过了，而优化过后是10M，接近为原来的一半，效果很好。打开app看优化过的图片，正常。 把上面提到的ImageOptim用在Android上，效果则很小。未优化前图片的总大小是十多M，压缩后是5M多，优化后是2.4M。乍看不错，但打包成App后，优化过的app只比未优化的小22K，而app的大小是4.5M左右。 我猜测，可能是打包过程中Google的优化功力比较厉害。这猜测的一个支持点是Google有能力推出自己的更小更好的webp格式，下面会详细介绍。 5. 用tint color来着色 以前，我们会有两张只有颜色有差别的图片，用来分别表示两种状态。 但现在我们有tint color，iOS和Android都支持，就可以给一张图片着色，这样的结果就是，我们可以用一张图片的不同tint color来表示不同的状态，差不多能节省一半。 当然，这个技术无法应用到两种状态的形状不同的情况。 参考文章： iOS: https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/UIKitUICatalog/ （查找Template Images这一节） Android: http://blog./2014/08/18/fast-android-asset-theming-with-colorfilter/ 其他考虑： 1. 有损压缩 上面提到的优化点阵图，都是指无损的。如果稍微的质量损失可以接受的话，就可以得到更小的图片。 相关工具比如像上面提到的ImageOptim的姐妹软件ImageAlpha，不过我没有用过，没有实际测试数据可提供。 2. webp webp是Google推出的一款据说比png更好更小的点阵图格式，参见官网。 据Google说，webp的无损图片比png的小26%以上，我们的UED部门的同学的实际使用感受是30%以上，所以还是很不错的。 webp在Android 4.0以上得到有限的支持，具体见这里。 webp在ios上则需要Google提供的library，可以直接在github上找别人打包好的，比如这里。 要注意的是，如果你的app是混合型的，有内嵌web view，且web里面有webp图片，则需要对uiwebview做扩展支持，参见这里。而这篇是相关介绍文章。
欢迎留言讨论。 |
|
|
