码迷,mamicode.com
首页 > 移动开发 > 详细

减小App大小:图片篇

时间:2015-03-03 22:18:14      阅读:183      评论:0      收藏:0      [点我收藏+]

标签:图片

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.danlew.net/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做扩展支持,参见这里。而这篇是相关介绍文章



欢迎留言讨论。

减小App大小:图片篇

标签:图片

原文地址:http://blog.csdn.net/scai_suryani/article/details/44040917

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!