App size is the product manager's concern, as some users tend to have smaller apps due to download time, traffic, etc., especially in countries with poor network speeds or higher tariffs, such as India.
There are many apps, the largest of which is the resource file, usually the picture.
One of our most recent apps focuses on the size of the image resources and has the following experience, including iOS and Android.
1. No image implementation
Some simple graphics can be done with some simple programming, such as dividing lines and rounded corners.
In iOS, some simple polylines can be easily drawn with a Bezier path.
Of course here to have a limit, too complex graphics, with code to achieve, very difficult to understand, it is better to use the image directly.
2. Remove unused images
In the process of development, a feature changes or does not, developers often forget to delete the unused resources, they are left behind.
These are useless to the user and should be erased.
iOS, I only used a tool called Fauxpas, I believe there should be other.
It is important to note that these tools may be false positives because it is possible for us to construct the image resources to be loaded in a dynamic manner, so these tools cannot be judged. Remember to check out the resources before deleting them.
Insert a sentence, about the above mentioned Fauxpas, it is the fee software, there is a 30-day trial period. If just to clear the picture, try it is enough, but it also provides a lot of good quality of the app to improve the detection, is worth buying for long-term use.
3. Replace some images with vector images
Now the screen resolution is getting higher, the iphone has 3 times times the size of the picture, Android will go to xxhdpi/xxxhdpi all the way up.
Vector picture is a good solution, it can be really magnified. However, it does not completely replace the bitmap because it supports only a few shapes.
Usually the simple graphical aspect (the subscript) is suitable for the vector diagram.
Refers to vectors, usually svg. Both iOS and Android need to be supported by a third-party library, such as:
Ios:https://github.com/svgkit/svgkit
android:https://code.google.com/p/androidsvg/
At the same time, iOS and Android each have their own vector map support.
IOS: Support vector images made of PDF, see here for the introduction of the article. Note that the PDF has an initial size, and iOS generates 1 time times/twice times/3 times times the size of the image when the PDF is converted to a picture, rather than supporting our own distortion-free amplification.
Android: The introduction of vector diagram support in 5.0, is through the XML resource way, specifically see here. I didn't use it, but it was a very unfriendly way to do it, but it would be nice if I could specify an SVG resource file.
4. Optimizing Bitmap Plots
Bitmap, usually we use PNG. When we save a picture from PS to PNG, this picture actually has the space to optimize.
The default configuration for iOS projects is to have the optimized PNG, but it looks like a normal effect. So we can use other tools to optimize it, remember to disable the optimized PNG option in the configuration at the same time.
We used a model called Imageoptim, the effect is very good.
Use the app you are developing to test, the total size of the image before the optimization is 13.1M, the optimization is 2.9M. Packaged into an app, the app before optimization is 19.7M, note that PNG was optimized by Xcode, and after the optimization is 10M, close to the original half, the effect is very good. Open the app to see optimized pictures, normal.
The above mentioned Imageoptim used on Android, the effect is very small. Not optimized before the total size of the picture is more than 10 m, after compression is more than 5M, after optimization is 2.4M. At first glance, but packaged into apps, the optimized app is only 22K smaller than the non-optimized app, which is about 4.5M in size.
I guess Google's optimization was a bit more powerful in the packaging process. One point of support for this speculation is that Google has the ability to launch its own smaller and better WEBP format, which is described in more detail below.
5. Coloring with tint color
Previously, we had two images that were only color-differentiated to represent two States.
But now we have Tint Color,ios and Android support, we can color a picture, so the result is that we can use a picture of the different tint color to represent different states, almost save half.
Of course, this technique cannot be applied to situations where the shapes of the two states are different.
Reference article:
ios:https://developer.apple.com/library/ios/documentation/userexperience/conceptual/uikituicatalog/(Find template Images this section)
android:http://blog.danlew.net/2014/08/18/fast-android-asset-theming-with-colorfilter/
Other considerations:
1. lossy compression
The above mentioned optimization bitmap, all refers to lossless.
If a slight loss of quality is acceptable, a smaller picture can be obtained.
Related tools such as the Imageoptim sister software Imagealpha mentioned above, but I have not used, no actual test data available.
2. WEBP
WEBP is a Google-launched bitmap format that is said to be better and smaller than PNG, see official website.
According to Google, WEBP's lossless image is more than 26% smaller than PNG, and the actual use of our ued department is more than 30%, so it's good.
WEBP has limited support for Android 4.0 above, see here for details.
WEBP needs Google's library on iOS and can find someone else to pack on GitHub, like here.
Note that if your app is mixed, has a built-in Web view, and the web has WEBP images, you need to extend support for UIWebView, see here. And this is the relevant introduction article.
Welcome message discussion.
Reduce app size: Picture article
