APP开发实战162-减少预置图片所占空间大小方法汇总

1 尽量使用Android和iOS系统自带的图片，系统没有的图片，才预置在APP中。

 

2 减少预置图片的个数，如AndroidAPP可以只预置一套XHDPI密度的图片，只有个别的小图标，如桌面icon，每种密度的都预置一张。iOS APP只预置2X和3X的图片。

 

3 普通的位图在不同分辩率的设备上伸缩时，很容易变形，APP内常会预置内容一样，但分辨率不同的多张图，解决这个问题，这样也导致APP所占空间变大。

可以使用点9图或SVG矢量图代替普通的位图，这两种格式的图伸缩都不会变形，不需预置多张内容一样，分辨率不同的图片，只需预置一张就可以了，可以有效减少APP所占空间。

 

4 APP通常都使用PNG格式的图，主要是Android和iOS系统会对其进行硬件加速，图片的加载速度相对会变快。

但对于欢迎界面的图、背景图和引导页的图，这些大尺寸的图片，建议使用JPG格式图片。

PNG格式有透明通道，是无损压缩，JPG格式的没有透明通道，且是有损压缩；使用JPG图片，虽然加载慢些，但图片体积小，也减少了APP的大小。

 

5 通常，引导页的多张图片只是中间的内容不同，背景都一样的；可以把引导图拆成一张背景图和多张内容图，相比多张完整的图片，可以有效减少APP的大小。

 

6 APP有时会使用到上下左右箭头这类内容一样，方向不同的图片，可以只预置一张上的箭头图标，下左右箭头可以使用代码旋转上箭头图标实现；这样只需预置一张图片，也减少了APP的大小。

在Google的官方文档中，有如下说明：

You can also omitresources that are only a rotated equivalent of another resource. The followingcode snippet provides an example of turning an "expand" arrow into a"collapse" arrow icon by simply rotating the original image 180degrees:

(https://developer.android.com/topic/performance/reduce-apk-size.html)

    如下图两个图标箭头都是朝右的：

对应的XML代码如下：

<ImageView

    android:layout_width="80dp"

   android:layout_height="wrap_content"

   app:srcCompat="@drawable/arrow_right_red"

    android:id="@+id/imageView"/>

<ImageView

    android:layout_width="80dp"

   android:layout_height="wrap_content"

   app:srcCompat="@drawable/arrow_right_red"

   android:id="@+id/imageViewLeft" />

 

如果想把第二个改成箭头向左的图标，可按如下方式实现：

//定义旋转功能的XML代码

<?xmlversion="1.0" encoding="utf-8"?>

<rotate xmlns:android="http://schemas.android.com/apk/res/android"

    android:fromDegrees="0"

    android:pivotX="50%"

    android:pivotY="50%"

    android:toDegrees="180"/>

 

//具体实现代码

Animation

rotateAnimation= AnimationUtils.loadAnimation(this, R.anim.rotate);

ImageView

imageViewLeft= (ImageView) findViewById(R.id.imageViewLeft);

imageViewLeft.startAnimation(rotateAnimation);

//图片旋转后，不恢复原状

rotateAnimation.setFillAfter(true);

 

    结果如下，只用一张图，通过代码，实现了两种显示效果：

 

7 在设计动画效果时，需要设计和开发同事配合，以便不用帧动画也可以实现动画效果，这样不需要预置多张帧动画需要的图片；也可以设计使用SVG矢量图实现动画，避免APP的体积变大。

 

8 需要设计同事在制作APP预置的图片时，不能只考虑绚丽的效果，而是尽可能减少每张图片的尺寸。

iOS的扁平化设计和Android的Material Design也都是要求简洁的设计风格。

 

9 使用tint和tintmode属性减少预置的图片资源。当只是要改变图片内容的颜色，而不改变图片内容时，以往做法是预置几张不同颜色的图片，使用这两个属性，只需预置一张图片就可以了，程序运行时，动态改变图片的颜色。

在Google的官方文档中，有如下说明：

You can include a separate resourcefor variations of an image, such as tinted, shaded, or rotated versions of thesame image. We recommend, however, that you reuse the same set of resources,customizing them as needed at runtime.

Android provides several utilities tochange the color of an asset, either usingthe android:tint and tintMode attributes on Android 5.0(API level 21) and higher. For lower versions of the platform, use the ColorFilter class.

(https://developer.android.com/topic/performance/reduce-apk-size.html)

如下界面：

对应的XML代码如下：

<ImageView

   android:id="@+id/login_image"

    android:layout_width="match_parent"

    android:layout_height="200dp"

    android:layout_marginTop="8dp"

   android:src="@drawable/login"/>

可以使用tint属性设置图片里显示的内容不变，但颜色改变，如下所示：

<ImageView

   android:id="@+id/login_image"

   android:layout_width="match_parent"

    android:layout_height="200dp"

    android:layout_marginTop="8dp"

   android:src="@drawable/login"

    android:tint="#EEEEEE"/>

此时界面变成如下所示：

也可以通过代码动态设置，代码如下：

ImageViewimageView = (ImageView) findViewById(R.id.login_image);

imageView.setColorFilter(Color.GRAY);

 

在许多APP输入密码的编辑框右边都有一个图标，反复点击图标，图标会显示不同的颜色，同时密码会以明文或密文形式显示。传统方式也是预置两张不同颜色的图片，使用tint和tintmode属性只需预置一张图片就可以了，程序运行时，动态改变图片的颜色。

如下所示界面：

对应的XML代码如下：

<android.support.v7.widget.AppCompatTextView

   android:id="@+id/login_eye_et"

    android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:layout_gravity="right|center"

   android:layout_marginRight="12dp"

   android:background="@drawable/login_eye_first"

   android:gravity="center"/>

设置tint和tintmode属性：

<android.support.v7.widget.AppCompatTextView

   android:id="@+id/login_eye_et"

   android:layout_width="wrap_content"

   android:layout_height="wrap_content"

   android:layout_gravity="right|center"

   android:layout_marginRight="12dp"

   android:background="@drawable/login_eye_first"

    android:gravity="center"

   android:backgroundTint="@color/colorAccent"

   android:backgroundTintMode="screen" />

界面如下：

也可以通过代码动态设置，代码如下：

privatevoid setDisplayPassword() {

    mIsDisplayPassword =!mIsDisplayPassword;

    if (mIsDisplayPassword){

       

       ViewCompat.setBackgroundTintList(mLoginEyeEt,ColorStateList.valueOf(Color.parseColor("#FF4081")));

       ViewCompat.setBackgroundTintMode(mLoginEyeEt, PorterDuff.Mode.SCREEN);

       mEditPassword.setTransformationMethod(PasswordTransformationMethod.getInstance());

    } else {

       ViewCompat.setBackgroundTintList(mLoginEyeEt,ColorStateList.valueOf(Color.parseColor("#CCCCCC")));

       ViewCompat.setBackgroundTintMode(mLoginEyeEt, PorterDuff.Mode.SCREEN);

        mEditPassword.setTransformationMethod(HideReturnsTransformationMethod.getInstance());

    }

}

使用AppCompatTextView控件是为了在低于Android 5.0 (API level21)的系统中也可以使用tint和tintmode属性。

 

10 使用WebP格式的图片，这样也可以减少图片所占空间的大小。

 

11 减少动画图片的帧数。

 

12 可以使用Drawable objects，如<shape>之类的，代替使用图片。

 

13 直接用代码生成图片，如单色的背景图之类的，减少预置的图片。

 

14 使用pngcrush和packJPG等工具压缩PNG和JPEG格式图片的大小。        
 
15 针对不同内容的图片，选择不同的格式：具有丰富多彩颜色的图片用JPG格式比PNG格式具有更高的压缩率，图片所占空间更小；具有比较单调颜色的图片，采用PNG格式比JPG格式所占的空间更小。
如下图所示，左边的图片颜色比较丰富，右边的图片颜色比较单调：

之前已经介绍过，WebP格式的图片比PNG和JPG格式的图片所占空间都小，所以优先考虑使用WebP格式的图片，就使用WebP格式。

具体选择哪种格式的图片，可以按以下流程处理：