开发APP不管是什么项目，都离不开对于图片的使用，我们在开发过程中经常会遇见前端访问时，图片或者视频、音频文件会出现卡、顿等加载缓慢的现象，这就是我们的图像等文件过大，深圳APP开发公司本文就详细与各位分享，我们各种APP项目开发过程是如何解决这些想象得，首先我们APP开发工程师说说怎样减少图片所占空间大小，要减少图片所占空间大小，可以采用以下方案。
（1）尽量使用Android和iOS系统自带的图片，系统没有的图片才预置在APP中。（2）减少预置图片的个数。如AndroidAPP可以只预置一套XHDPI密度的图片，只有个别的小图标，如桌面icon，每种密度的都预置一张。iOSAPP只预置2X和3X的图片。
（3）普通的位图在不同分辨率的设备上伸缩时，很容易变形，APP内常会预置内容一样但分辨率不同的多张图来解决这个问题，这样也导致APP所占空间变大。可以使用点9图或SVG矢量图代替普通的位图，这样不需预置多张内容一样、分辨率不同的图片，只需预置一张就可以了，可以有效减少图片所占空间大小。
（4）APP通常都使用PNG格式的图，主要是Android和iOS系统会对其进行硬件加速，图片的加载速度相对会变快。但对于欢迎界面的图、背景图和引导页的图，这些大尺寸的图片建议使用JPG格式图片。PNG格式有透明通道，是无损压缩；JPG格式的没有透明通道，且是有损压缩，使用JPG图片，虽然加载慢些，但图片体积
（3）普通的位图在不同分辨率的设备上伸缩时，很容易变形，APP内常会预置内容一样但分辨率不同的多张图来解决这个问题，这样也导致APP所占空间变大。可以使用点9图或SVG矢量图代替普通的位图，这样不需预置多张内容一样、分辨率不同的图片，只需预置一张就可以了，可以有效减少图片所占空间大小。
（4）APP通常都使用PNG格式的图，主要是Android和iOS系统会对其进行硬件加速，图片的加载速度相对会变快。但对于欢迎界面的图、背景图和引导页的图，这些大尺寸的图片建议使用JPG格式图片。PNG格式有透明通道，是无损压缩；JPG格式的没有透明通道，且是有损压缩，使用JPG图片，虽然加载慢些，但图片体积
体积小，也减少了图片所占空间大小。
（5）通常引导页的多张图片只是中间的内容不同、背景都一样的，可以把引导图拆成一张背景图和多张内容图，相比多张完整的图片可以有效减少图片所占空间大小。
（6）APP有时会使用到上下左右箭头这类内容一样、方向不同的图片，可以只预置一张向上的箭头图标，向下、向左、向右的箭头可以使用代码旋转上箭头图标实现。这样只需预置一张图片，也减少了图片所占空间大小。如图27-1所示，
两个图标箭头都是朝右的。图27-1对应的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" />
（5）通常引导页的多张图片只是中间的内容不同、背景都一样的，可以把引导图拆成一张背景图和多张内容图，相比多张完整的图片可以有效减少图片所占空间大小。
（6）APP有时会使用到上下左右箭头这类内容一样、方向不同的图片，可以只预置一张向上的箭头图标，向下、向左、向右的箭头可以使用代码旋转上箭头图标实现。这样只需预置一张图片，也减少了图片所占空间大小。如图27-1所示，
两个图标箭头都是朝右的。图27-1对应的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 代码 <? xml version=" 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);
//定义 旋转 功能 的 XML 代码 <? xml version=" 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);
结果如图27-2所示，只用一张图，通过代码实现了两种显示效果。
（7）在设计动画效果时，需要设计和开发同事配合，以便不用帧动画也可以实现动画效果，这样不需要预置多张帧动画需要的图片；也可以设计使用SVG矢量图实现动画，减少图片所占空间大小。
（8）需要设计同事在制作APP预置的图片时，不能只考虑绚丽的效果，也要尽可能减少每张图片的尺寸。iOS系统的扁平化设计和Android系统的MaterialDesign也都是要求简洁的设计风格。
（9）使用tint和tintmode属性减少预置的图片资源。当只是要改变图片内容的颜色，而不改变图片内容时，以往做法是预置几张不同颜色的图片，使用这两个属性只需预置一张图片就可以了，程序运行时动态改变图片的颜色。如图27-3所示的界面中的图片内容是彩色的，可以利用tint属性把颜色改成灰色。
（8）需要设计同事在制作APP预置的图片时，不能只考虑绚丽的效果，也要尽可能减少每张图片的尺寸。iOS系统的扁平化设计和Android系统的MaterialDesign也都是要求简洁的设计风格。
（9）使用tint和tintmode属性减少预置的图片资源。当只是要改变图片内容的颜色，而不改变图片内容时，以往做法是预置几张不同颜色的图片，使用这两个属性只需预置一张图片就可以了，程序运行时动态改变图片的颜色。如图27-3所示的界面中的图片内容是彩色的，可以利用tint属性把颜色改成灰色。
可以在XML文件中放置属性改变颜色，如下所示：
< 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"/>
< 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"/>
也可以通过代码设置颜色，如下所示：
ImageView imageView = (ImageView) findViewById( R. id. login_ image); imageView. setColorFilter( Color. GRAY);
实现效果如图27-4所示。
在许多APP中，输入密码的编辑框右边都有一个图标，反复点击图标，图标会显示不同的颜色，同时密码会以明文或密文形式显示如图27-5所示。
传统方式也是预置两张不同颜色的图片，使用tint和tintmode属性只需预置一张图片就可以了，程序运行时动态改变图片的颜色。图27-5可以在XML文件中设计属性改变颜色，如下所示：
传统方式也是预置两张不同颜色的图片，使用tint和tintmode属性只需预置一张图片就可以了，程序运行时动态改变图片的颜色。图27-5可以在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" android: backgroundTint="@ color/ colorAccent" android: backgroundTintMode=" screen" />
也可以通过代码设置颜色，如下所示：
private void 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.
Mode. SCREEN); mEditPassword. setTransformationMethod( HideReturnsTransformationMethod. getInstance()); } }
实现效果如图27-6所示。
使用AppCompatTextView控件是为了在低于Android5.0版本（APIlevel21）的系统中也可以使用tint和tintmode属性。
（10）使用WebP格式的图片，也可以减少图片所占空间的大小。
（11）减少动画图片的帧数。
（12）可以使用Drawableobjects，如<shape>之类的代替使用
（10）使用WebP格式的图片，也可以减少图片所占空间的大小。
（11）减少动画图片的帧数。
（12）可以使用Drawableobjects，如<shape>之类的代替使用
使用图片。
（13）直接用代码生成图片，如单色的背景图，以减少预置的图片。
（14）使用pngcrush和packJPG等工具压缩PNG和JPEG格式图片的大小。 （15）针对不同内容的图片，选择不同的格式。具有丰富多彩颜色的图片用JPG格式比PNG格式具有更高的压缩率，图片所占空间更小；色彩比较单调的图片，采用PNG格式比JPG格式所占的空间更小。如图27-7
和图27-8所示
，左边的图片色彩比较丰富，右边的图片色彩比较单调：之前已经介绍过，WebP格式的图片比PNG和JPG格式图片所占的空间都小，所以优先考虑使用WebP格式的图片。具体选择哪种格式的图片，可以按图27-9所示的流程处理。
好了，APP开发公司本文关于“APP制作时怎样减少图片所占空间大小”详细方法与步骤就分享到这里，谢谢关注，博纳网络编辑整理。
（13）直接用代码生成图片，如单色的背景图，以减少预置的图片。
（14）使用pngcrush和packJPG等工具压缩PNG和JPEG格式图片的大小。 （15）针对不同内容的图片，选择不同的格式。具有丰富多彩颜色的图片用JPG格式比PNG格式具有更高的压缩率，图片所占空间更小；色彩比较单调的图片，采用PNG格式比JPG格式所占的空间更小。如图27-7
和图27-8所示，左边的图片色彩比较丰富，右边的图片色彩比较单调：之前已经介绍过，WebP格式的图片比PNG和JPG格式图片所占的空间都小，所以优先考虑使用WebP格式的图片。具体选择哪种格式的图片，可以按图27-9所示的流程处理。好了，APP开发公司本文关于“APP制作时怎样减少图片所占空间大小”详细方法与步骤就分享到这里，谢谢关注，博纳网络编辑整理。
当前文章链接：/construction/appkaifa/2742.html
如果您觉得案例还不错请帮忙分享：
[声明]本网转载网络媒体稿件是为了传播更多的信息，此类稿件不代表本网观点，本网不承担此类稿件侵权行为的连带责任。故此，如果您发现本网站的内容侵犯了您的版权，请您的相关内容发至此邮箱【qin@198bona.com 】，我们在确认后，会立即删除，保证您的版权。
