Android图片优化指南

图片作为内存消耗大户,一直是开发人员尝试优化的重点对象。Bitmap的内存从3.0以前的位于native,到后来改成jvm,再到8.0又改回到native。fresco花费很多精力在5.0系统之前把Bitmap内存改回到native,高版本上面则遵循系统实现,却又被官方打脸。

jvm每个进程都有内存上限,而native则没有限制(不是没有影响,至少不会oom),所以把内存大户Bitmap挪到native可能是很多人的梦想,但native的管理和实现明显比jvm更为复杂,除非有现成实现,很少有人去动这一块。行业里面的大部分图片库都没有涉及这块,大部分的程序员也秉着够用就好的态度用了很多年,这说明程序员也是会偷懒的。官方的策略修改到底原因几何,其实我也没搜到相关说明,有知道的同学欢迎留言。

第一条规则:把Bitmap保存到native

一个app里面的图片都会有尺寸,一般情况下面图片的尺寸就是view的大小,而view的大小在我们使用dp单位后在不同的机器上面表现出来的实际像素都有差别,为了节约流量开销,加快返回速度,同时符合按需加载的原则,我们应该只加载实际view尺寸大小的图片。一般图片存储提供商都会提供在线压缩服务,我们只需要在请求链接里面加上参数即可。这里还有个问题我们一般请求加载图片的代码都是写在Activity的onCreate,或者Adapter的getView函数里面,这个时候其实是获取不到view尺寸的(还未measure),这里有几种做法:

使用目测:比如一个列表是左右图片布局的,那就可以请求屏幕一半宽度的尺寸图片

view使用了固定尺寸:这个没有问题,我们直接拿getLayoutParams()的width和height就可以了

view的maxWidth/maxHeight:view无法固定尺寸,我们可以在xml里面给view配置maxWidth/maxHeight来指导图片库加载什么尺寸的图片

加载图片前先measure:不怎么推荐,因为图片加载出来后view还得measure一次

一般做法是给图片加载库包装一层,根据传进来的url判断是否已经指定大小(开发者当然可以决定想加载多大图片),如果还未指定则使用上面的策略进行动态调整,如果最后还是没能加上缩放参数,则有个兜底策略,不加载超过屏幕尺寸大小。

第二条规则:按需请求

做了上面按需加载后还有个问题,会发现有时候不同的页面需要加载同一个图片url,但在尺寸上面有细微差别,结果导致请求重复(一般图片加载库都是url作为缓存key),有点弄巧成拙,反倒浪费了流量和时间。这种情况我们需要做些微调。对于A页面图片尺寸是200x200,对于B页面图片尺寸是180x180,我们认为可以使用200x200的图片缩放到180x180,这有两种做法:第一种是让开发者始终都去加载稍微大一点的图,这个要求有点高,一个页面开发的时候很难前后联系。第二种是修改图片加载库,自动完成这个事情。后者自然合理,修改图片加载库在决定使用缓存的那一步判断是否有比自己大的缓存已经存在即可,当然这个策略可以每个产品自己调整,比如也可以认为已经存在的缓存尺寸小于一定值也是可以接受也是可以的。还有复杂的情况比如缓存图片高宽比和要加强的不一样如何处理等等,策略都可以自己定,但一定有必要做这个事情。

这里还要补充一点,大型产品一般图片域名会有好几个,用来做链路择优用的,一定要记得缓存的时候用来做key的url要去掉域名影响。

再补充一点,有些特殊的使用场景可以考虑采用上面说的第一种方式来做,举个例子比如一个操作一定会加载100x100的图,然后也一定会等会加载500x500的同一张图,这种场景下面按第二种方式来处理显然会加载两次,但如果开发者这2个位置写死都加载500x500则明显更好一些。所以方法是死的,人是活的,要看实际使用场景。

还有一些特殊场景,比如程序里面有两个进程,A进程会加载500x500的图,B进程会加载不管什么尺寸的同一张图,默认情况下面这2个请求会同时发出,这就很可能会造成重复请求,这种情况下面需要做一点跨进程同步,或者简单一点其中一个进程请求做一点延迟处理。

第三条规则:合并相似请求

实在不得已要从服务端加载大图或者原始尺寸下来,或者因为上面说的策略故意加载大图下来,在decode的时候要进行采样,这个是老生常谈了,使用options.inJustDecodeBounds来获取原始尺寸,然后按需使用options.inSampleSize来采样图片到接近view尺寸。

第四条规则:按需加载

Bitmap在decode的时候可以使用inPreferredConfig指定配置格式,常见的有:

参数取值含义ALPHA_8图片中每个像素用一个字节(8位)存储,该字节存储的是图片8位的透明度值RGB_565图片中每个像素用两个字节(16位)存储,两个字节中高5位表示红色通道,中间6位表示绿色通道,低5位表示蓝色通道ARGB_4444图片中每个像素用两个字节(16位)存储,Alpha,R,G,B四个通道每个通道用4位表示ARGB_8888图片中每个像素用四个字节(32位)存储,Alpha,R,G,B四个通道每个通道用8位表示

对于质量细节要求比较高的图片可以使用ARGB_888,这也是fresco的默认配置。而对于JPG图片可以使用RGB_565,从上面可以看出内存占用之间减少一半,非常有吸引力,而app里面事实上大部分应该都是JPG。但往往在和视觉的PK当中开发往往败下阵来,降低了图片质量不行!!开发总是锲而不舍,我们可以建议采用这样的策略:对于尺寸小于一定尺寸的JPG(比如300),我们使用565,而对于大图为了保留细节我们仍然使用8888。还是那句话策略是活的。

第五条规则:进一步按需加载

使用三级缓存机制,内存磁盘网络,这也是官方推荐的方式。内存缓存旨在加快访问速度,磁盘缓存避免反复请求。关于这一点就不在赘述了,基本开源图片库都会这么做

第六条规则:使用三级缓存机制

很多场景下面我们需要显示图片的一部分,或者进行图片效果叠加,比如做个倒影之类的。很多同学上来就准备createBitmap,然后把叠加效果绘制到这个临时Bitmap,或者从原始Bitmap里面先剪一部分出来生成一个新的Bitmap,再设给ImageView。或者使用createScaledBitmap进行缩放。更不小心的同学可能直接把这些操作代码写在UI线程,然后写在子线程又比较麻烦,这边推荐的是使用自定义绘制,canvas有个drawBitmap方法可以把某个区域绘制到指定位置。叠加效果也可以完全使用自定义view来自己draw,这样不会有临时Bitmap生成,效率会更高。

如果自定义view有困难,我们可以使用Drawable,只要能拿到canvas,这两种做法是一样的。

这里列举一些实例,好让大家可以进一步理解:

一个按钮有普通和按下状态,按下是普通状态上面叠加一个遮罩,不需要切两张图,按下状态的Drawable可以使用自定义Drawable的canvas先绘制普通状态的图,再在上面绘制一层颜色。或者按下状态使用LayerDrawable,这个Drawable自动帮你做了这个事情

需要把Bitmap的[0,0,200,200]的区域显示到ImageView上面,使用canvas.drawBitmap(bitmap, [0,0,200,200], [0,0,图片宽,图片高],paint)

绘制倒影,这个逻辑性比较强了,这里就不具体展开,canvas的操作学习下,结合局部绘制其实很简单

有个图片,需要在左上角显示一个角标,正常情况下面需要在左上角摆一个view,如果使用Drawable自定义绘制,canvas画一下就好,类似下面的示例代码。

给大家一个自定义绘制的例子,随心组合:

class WithLineDrawable extends DrawableWrapper {

private MyConstantState mMyConstantState;

private boolean mForTop;

private Paint mLinePaint = new Paint();

public WithLineDrawable(Drawable drawable, boolean forTop) {

super(drawable);

mLinePaint.setColor(getLineColor());

mForTop = forTop;

  }

@Override

public void draw(Canvas canvas) {

super.draw(canvas);

if (mForTop) {

        canvas.drawLine(0, 0, getBounds().width(), 0, mLinePaint);

      } else {

        canvas.drawLine(0, getBounds().height(), getBounds().width(), getBounds().height(), mLinePaint);

      }

  }

@Nullable

  @Override

public ConstantState getConstantState() {

if (mMyConstantState == null) {

mMyConstantState = new MyConstantState();

      }

return mMyConstantState;

  }

class MyConstantState extends ConstantState {

@NonNull

      @Override

public Drawable newDrawable() {

return new WithLineDrawable(getWrappedDrawable().getConstantState().newDrawable(), mForTop);

      }

@Override

public int getChangingConfigurations() {

return 0;

      }

  }

}

一定要把观念从Bitmap转变到Drawable,当还在费劲心思Bitmap该如何处理的时候,想想Drawable里面如何使用canvas进行各种自定义绘制。

第七条规则:多使用自定义View或者Drawable自定义绘制

图片格式发展到今天已经非常多样了,目前很多开源库都支持了webp来代替jpg和gif,webp在压缩率上面有很多优势,虽然解码上面略逊一筹,经过我们测试还是很不错的。也是推荐大家使用,不论是网络图片下载还是apk内置,用来代替jpg很合适,而代替png则还需要一些时间,主要是低版本系统对于透明webp还有些兼容问题。Android

P上面支持了heif格式也是想代替jpg,不过这个格式目前还没仔细研究过。

对于内置apk的图标类,则推荐使用svg,不再需要切几套图,而且非常小,官方使用的compat包里面解码svg会做缓存,也进一步提升性能。不过也正因为此尽量不要一个图片使用过多不同尺寸。大部分的图标都使用代码代替图片后,apk大小可以明显减少,这也符合我们的原则:能程序画的就绝不切图。

第八条规则:使用更好的图片格式

很多时候我们需要给图标换色,关于颜色混合有一套理论,官方很早就支持,使用ColorFilter,后来compat包里面出了个tint,所以如果有颜色混合处理的相关逻辑,千万不要去生成临时Bitmap,使用类似如下代码:

//1:通过图片资源文件生成Drawable实例

Drawable drawable = getResources().getDrawable(R.mipmap.ic_launcher).mutate();

//2:先调用DrawableCompat的wrap方法

drawable = DrawableCompat.wrap(drawable);

//3:再调用DrawableCompat的setTint方法,为Drawable实例进行着色

DrawableCompat.setTint(drawable, Color.RED);

第九条规则:使用着色API

内置apk的图片资源非常多,总有一些常规图片仍然需要使用jpg或者png,我们要想办法进一步压缩他们,这样可以有效控制apk大小,这里推荐使用ImageOptim,这个工具集合了很多种压缩方式,效果显著。

第十条规则:使用压缩工具

后记:

很多面试的时候问如何做图片加载优化,他们会回答recycle

bitmap,事实上这个操作要很谨慎,一不留神就会导致出问题。大部分的应用不太会干这个事情,吃力不讨好,交给jvm垃圾回收多好。图片解码还有一些参数可以优化,比如inBitmap,这里就不具体展开了。

总结下:

把Bitmap保存到native

按需请求

按需加载

合并相似请求

使用三级缓存机制

多使用自定义View或者Drawable自定义绘制

使用更好的图片格式

使用着色API

使用压缩工具

更多文章请关注微信公众号:安卓之美

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 218,386评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 93,142评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,704评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,702评论 1 294
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,716评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,573评论 1 305
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,314评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,230评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,680评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,873评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,991评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,706评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,329评论 3 330
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,910评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 33,038评论 1 270
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,158评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,941评论 2 355

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 172,139评论 25 707
  • 7.1 压缩图片 一、基础知识 1、图片的格式 jpg:最常见的图片格式。色彩还原度比较好,可以支持适当压缩后保持...
    AndroidMaster阅读 2,516评论 0 13
  • 文 | 晨儿 就因为我穷,我的理想就不值钱吗? 对,我是没有出生在一个好的起点的家庭, 对,我没有一个富二代的爸,...
    晨妤儿阅读 808评论 0 0
  • lldb(gdb)常用的调试命令? po:打印对象,会调用对象description方法。是print-objec...
    白羊的羊阅读 446评论 0 2
  • 晚上八点十分,汇报店庆活动进展的会议已经连续开了五小时四十分钟。想着老公在家带娃,斟酌用词给主管发微信,询问是否可...
    雷芃阅读 324评论 0 1