Android静态资源使用建议-图片篇

图片使用的建议

静态图片尽量压缩后使用。
先压缩再转webp,最好不要直接拿美术的切图(原始图片太大了),长期下去资源size过大。如果部分图片验收有差异可以不压缩或者降低压缩比例。

图片压缩的必要性

原因:单个图片在app中占用的实际内存 = scale后的高度 * scale后的宽度 * 单个像素内存。

图片内存计算方式

1,其中单个像素的大小

跟图片的存储位数有关,如ARGB_8888为32位,占用4个字节,RGB_565占用2个字节。
图片原始size = 宽*高 * 每个像素点的大小。如图片:1080 * 1920 * 4B = 8,294,400 B ≈ 8.29MB。
ALPHA_8 -- (1B)
RGB_565 -- (2B)
ARGB_4444 -- (2B)
ARGB_8888 -- (4B)
RGBA_F16 -- (8B)

2,缩放比scale = (float) targetDensity / density。

即:新图的高度 = 原图高度 * (设备的 dpi / 目录对应的 dpi )
新图的宽度 = 原图宽度 * (设备的 dpi / 目录对应的 dpi )
如我的手机,设备Density为3,图片放在不同的资源目录下面,缩放比例是不一样。图片72*72,32位的图片放在hdpi的目录,加载后宽高会放大2倍,所以占用的内存比图片原始size大4倍。


image.png
/**
 * 小米6手机,设备dpi为3,480
 * 原始图片,72*72*4=20736,图片放在hdpi目录中,密度值240
 * 实际加载,144*144*4=82944,设备密度值480,宽高都放大了2倍,实际内存放大了4倍
 */
fun testPngSize(resources: Resources) {
    try {
        //xxhdpi中放了test_size.png后,width=72,height=72,memory=20736
        //xxhdpi中删除,放在hdpi目录后获取:width=144,height=144,memory=82944
        val bitmap: Bitmap? =
            BitmapFactory.decodeResource(resources, R.mipmap.test_size, null)
        Log.d(TAG, "width=" + bitmap?.width + ",height=" + bitmap?.height + ",memory=" + bitmap?.byteCount)
        val metrics: DisplayMetrics = resources.displayMetrics
        Log.d(TAG, "the density=" + metrics.density)
    } catch (e: Exception) {
        Log.e(TAG, "testPngSize error = $e")
    }
}

现在主流是大屏手机,如果有xxhdpi的图片,尽量不要放进mdpi或者hdpi目录,增加内存消耗,而对于低密度值的手机查看,缩小图片也没啥问题。

资源文件夹的密度值

drawable密度值

图片size越大,不仅增加了apk的体积,而且增加了内存占用,大图更是增加了设备OOM的风险。

压缩工具推荐

有比较多方式,目前主要用tinypng。

TinyPng官网压缩

https://tinypng.com/将图片拖放进去压缩后下载即可。

tinyweb

AS插件:TinyPngPlugin

安装后,新版AS无需重启即可生效。Tools->TingPNG,将图片路径填入即可,支持目录,如检索component-audiohall/src/main/res/drawable-xxhdpi/目录并处理里面的所有png图片,压缩了14张png图片,原始大小2.18M,压缩后345kb,压缩比84.2%。

图片资源规范

所以为了减少图片size,以及内存占用,主要是减少像素,裁剪到合适大小或者降低图像位数。

1,切图尽量小,去除额外的透明度。

如下面这个图片,项目中直接放了这么大的图片(已处理),原始大小184*163px,32位,842.02kb,接近1M。实际上我们只需要中间部分,空白的地方可以通过代码控制间距。

2,压缩图片

3,使用点九图

xx.9.png,对于规则的可重复部分做拉伸,减少了图片的原始size,达到图片放大的目的。

能用shape解决的问题,就不用图片

如图片加边框颜色,纯色背景或者渐变色都可以shape定义,就不用切图。见过其他端就有很多地方,都是贴图,我们say no!

4,不用的资源及时删除。

使用lint检查或者业务去除后及时删除无用的资源。

5,png转webp

项目中已有做法。选择图片,右键选择:Convert to webP.


png转webp

6,图片着色器tint

如果有个icon是纯色,如箭头,这个页面是黑色,其他页面是白色,但是大小是一样的,就没有必要搞两张图片了。
直接用tint,效果如图:

<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:layout_gravity="center_horizontal"
    android:layout_marginTop="10dp"
    android:src="@mipmap/test_size"
    android:tint="@android:color/white" />
image.png

使用TinyPNG插件的详细数据如下:

uploading....
ParentFile:  component-audiohall/src/main/res/drawable-xxhdpi/
xxxxxxxxxx\src\main\res\drawable-xxhdpi\ic_poke_right_hand.png
         source = 845030    result = 88914
         diff   = 756116   ratio = 89.48 %
=============================================
Finish
Before total size:2185907
After total size:345340
Total compressed size:1840567
Total compressed ratio:84.20 %

能减就减。

可以考虑加入图片自动压缩。

Thanks

Welcome to contact me: duqian2010@gmail.com or Wechat:dusan2010

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