减小App大小：图片篇

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大小：图片篇相关推荐

iOS：app直播---原理篇
[如何快速的开发一个完整的iOS直播app](原理篇) 转载自简书@袁峥Seemygo:http://www.jianshu.com/p/7b2f1df74420 一.个人见解(直播难与易) 直播难: ...
（转）【如何快速的开发一个完整的iOS直播app】(原理篇)
原文链接:https://www.jianshu.com/p/bd42bacbe4cc [如何快速的开发一个完整的iOS直播app](原理篇) [如何快速的开发一个完整的iOS直播app](原理篇) ...
压缩减小图像大小技巧：8个最佳 JPEG 图像压缩软件
如果您必须压缩以减小特定图像的大小,Jpeg 图像压缩软件可能会有很大用处.您无需自己动手,只需将图像上传到各种软件,等待工作完成即可.然而,大多数人通常对他们应该选择哪种软件感到困惑,因为可供选择的 ...
iOS：app直播---采集篇
[如何快速的开发一个完整的iOS直播app](采集篇) 转载自简书@袁峥Seemygo:http://www.jianshu.com/p/c71bfda055fa 前言开发一款直播app,首先需要采 ...
webp app推荐图片格式，更小更快减少oom
一.什么是 WebP? WebP(发音 weppy,项目主页),是一种支持有损压缩和无损压缩的图片文件格式,派生自图像编码格式 VP8.根据 Google 的测试,无损压缩后的 WebP 比 PNG ...
android 图片墙拼贴,三步搞定用APP打造图片文字拼贴效果
相信大家一定见过一种文字拼贴效果的图片,许多大小不一.字体不同.颜色各异的文字拼合出一幅完整的画面.如果你曾经也想自己制作这么一张高端大气上档次的独特图片,却苦于自己的PS水平不到家,那么一定不要错过 ...
python 三维图片任意切片_python实现对任意大小图片均匀切割的示例
改代码是在windows 系统下打开路径和保存路径换成自己的就可以啦~ import numpy as np import matplotlib import os def img_seg(dir) ...
PhotoShop批量生成App大小不同的Icon
PhotoShop批量生成App大小不同的Icon 某项目上线,要求替换App的Icon:而设计只发给了一个psd文件:为了带领兄弟姐妹们尽快完成项目,忍了,自己切图.辛辛苦苦切好图,放到App中,一 ...
iOS动手做一个直播app开发(代码篇)
iOS动手做一个直播app开发(代码篇) ###开篇好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金量都不错的文 ...
【如何快速的开发一个简单的iOS直播app】(代码篇)
开篇([如何快速的开发一个完整的iOS直播app](原理篇) ) 好久没写简书,因为好奇的我跑去学习直播了,今天就分享一下我的感慨. 目前为止直播还是比较热点的技术的,简书,git上有几篇阅读量和含金 ...

减小App大小：图片篇

减小App大小：图片篇相关推荐

最新文章

热门文章