This article will introduce how to manage image resources on Android, including how to add and use images, and how to reduce the package size from the image side.

First of all, Android and iOS are highly componentited. There are more than 80 components on each side. There is a component for storing image resources. Initially just put the image here, and other components will refer to CommonSrc if they want to use the image.

Later, in order to unify entry, standardize image naming, limit image size, and manage dependencies between components and images (i.e., which images are used by a component), a library system was established. When developing students add pictures, they can directly log in the system, select components and branches, drag the picture into the upload area, click save, and then the system will automatically trigger the construction of the picture. After the construction is completed, they will send a wechat message to inform the uploaser. After receiving the notification, the uploaser can reference the desired picture after sync project.

The reason for choosing components and branches is to establish the relationship between components, branches and images. Which image is used by which branch of which component. When there is a branch merge, we hook the merge event, and the corresponding image dependencies are merged with the branch. Once these three relationships are established, image relationships follow components and branches, rather than apps. In the future, when multiple apps share a component, unnecessary images will not be imported.

Let’s look at the commonSrc build process in more detail. We have removed the code permission to develop student image components, so you can’t add images directly to CommonSrc. A shell project with only a master branch remains. The build script checks the master branch, downloads the image resource bundle, decompresses the image into the CommonSrc directory, builds the CommonSrc component, and upload maven.

IOS has a better function called picture cloud control, iOS encapsulates a unified image loading control, in addition to loading pictures, will also count the loading times of each picture, packaging, the system will be less visited pictures on the server, no longer into the installation package these pictures, so as to reduce the package volume.

Recently, the company is doing inclusion optimization, and the image resources are naturally the focus of optimization. We have checked some image files. Some pictures with single tone have several hundred KB, and the compression space of such pictures is the largest. First think of webp, as also has direct transfer webP function, tried the effect is quite obvious, 50MB picture components to webP reduced to 15MB. There are three methods for automatic conversion. One is to make a plug-in and automatically transfer webP during compilation. There are also ready-made schemes, such as Booster of Didi. But both of them are intrusive in the build process, with the former taking App packaging time and the latter taking CommonSrc packaging time. So there is a third way, upload pictures after the server directly to webP. In fact, this is one of the original intentions of our library system, is to do anything with the resources.

The WebP format, while good, cannot be generalized. Free guest compression ratio is 75%, in order to prevent the individual image compression distortion is serious, the system added the blacklist function, you can disable some pictures webP format. The Android startup icon can’t be webp, it can only be PNG, so it’s natural to add the name of the image to the blacklist.

The gallery system also allows you to download the image package at a specified resolution, so you can only download the 3x image, and all the 2x image space is saved. In addition to optimizing package volume with gallery management, we also use resource obfuscation and strict patterns, which will be covered in future articles.

Author: Qu Jianchao, Mobile Architecture Group, Yu Da Front-end R&D Center

Recruitment information

New students are wanted in the research and development Center!

FE/iOS/Android engineer

Company benefits:

  • Full five insurance and one housing fund, and additional purchase of commercial insurance
  • Free gym + annual physical
  • 10% discount on rent near the company
  • 2 promotion opportunities per year

Welcome to join us if you have a passion for technology! Resume please send to [email protected], or add wechat V-nice-v details chat!