Bidding technology three glimpses of the size of the installation package

1 starting with a few little things.

Spring Festival at home to help my sister's iphone installed on the market all kinds of apps, forget that she is using 4G traffic monthly, so after downloading 10 apps, not only exhausted the traffic, but also in accordance with 0.3 yuan/trillion price deduction of seventy or eighty yuan charges. I looked at the volume of these apps and found that every app volume was 40-50m, which surprised me because I remember the apps were 10-20m two years ago.

Another memorable thing is to go to the park attractions, at that time, there is an activity at the gate of the park "sweep QR code download app to reduce 10 yuan", but I found that download this 40M app to spend 12 yuan of traffic, this is actually to spend more than 2 yuan of money, so "sweep code to reduce" This thing is very ordinary citizen for me.

The result is a conclusion that the app installation package must be small in size, at least smaller than the competitor's app.

For Android, the major market stores in the country have found this problem, so for users to upgrade the app, each app will provide incremental download features, so the app version upgrade is no longer dozens of m of traffic, but just download the 1-2m Delta package can be upgraded to the latest version, This greatly saves traffic. [1]

For iOS, AppStore provides incremental update functionality from IOS6 onwards. For ios6.x and iOS7.0, as long as there are file changes, the file will go into the incremental update package, such as 1 10M files, only changed the content of 1K, this 10M file will go into the incremental update package, the package is still very large. By the iOS7.1 and later, this mechanism has been improved, it will put this 1K changes in the incremental update package, which greatly reduces the size of the incremental update package, but the installation will be slow, because the 1K changes to merge into the 10M file, this is a very cumbersome and time-consuming work. [2]

However, the above measures can only solve the traffic problem of upgrading users, it is not helpful for new users. We must reduce the size of the installation package to attract more new users.

2 Why is the installation package so big ?

What makes the app installation package so bulky?

We saw the internal structure of the iOS and Android installation packages in the previous chapters, and there was nothing we could do about the executables; FOR XML files, these files will greatly reduce the volume after the app is packaged and compressed, so you don't have to worry about them;

As you can see here, please stop your work and check the size of the pictures and audio files in your own app package. Pictures but generally greater than 1M, are required to thin body. For 500k-1m within this range, there is also the possibility of slimming. I have studied a lot of well-known apps, many of which are in the 2-3m look, in fact, there is no need, the reason is so big, because the UI designer to provide the design is so large, the developer took over the file size is not directly to the project, over time, the volume of the app package is large.

Among the many apps, I have the deepest impression of a travel software, all of its pictures are not more than 100k, even more than 50k are numbered. This is the ultimate performance of the home.

Next to the audio file, for app-class apps, most of what I see is the voice of the app push, which is simple and should not exceed 10k. But the audio I see in many apps is around 100k. This is one direction of our optimization. There are many such software on the Internet that can compress the audio significantly.

3 Differences and usage scenarios for PNG and JPG

The designer once asked me, why does the app not use JPG pictures, the same size, the PNG format picture is much larger than the JPG picture.

As we all know, PNG has a transparent channel, and JPG does not, in addition to PNG is lossless and JPG is lossy compression, so there is a lot of information stored in PNG, the volume is naturally large.

However, the mobile phone has a unique effect on PNG, it will be hardware acceleration, so we will find that the same background map, PNG although the volume is larger than JPG but loading speed is faster.

Finally, for the image in the app package, we use PNG format, and for the image to be loaded from the Web, taking into account the traffic and download speed, the use of JPG format, because it has a high compression rate, small size.

But for the background map, the guide page, this large-size picture, we still prefer to use the JPG format, although loading slower, but small size, reduce the volume of the package. The apps I've seen are basically doing this.

For the splash ad map, that is, every time you open the app flash through the ads, because we regularly to download a new ad map from the online and displayed on the Spalsh page, so here to use JPG format pictures.

For iOS, Apple requires the Start page (launchimage) to be a PNG image, or it will be rejected when it is approved.

Google later released a new image format, WebP, its compression rate is better than JPG, has been gradually popularized. Android is naturally supported, iOS wants to use this format picture, need to introduce the WEBP decoder in the program.

4 Splash, guide map and background map

By analyzing images from more than 50 apps, I found 3 more typical scenarios where most of the company's solutions were identical:

1. Splash Default advertising is the largest volume, and corresponding to different models, to do more than sets, according to my experience, each picture control in the 300-500k around on it can be. High resolution, for mobile phones, can not see the effect.

2. Guide map, the designer will give a few high-resolution pictures each time, and then the programmer to put it into the app, the volume naturally become larger. In fact, careful observation, you will find that in order to maintain the unity of style, the background of these pictures is the same. So we can do this, for example, with a little bunny on the background:

3. L split the background with the bunny into 2 pictures. If there is a duckling on the background of the other guide, then only the picture of the duckling is needed, and the background map can be reused.

4. Based on the resolution, the location of the rabbit is placed dynamically, and the background map is dynamically stretched to fill the entire screen.

5. For the background map, in order to achieve a visual effect, this picture is often added to the effect of the blur, so, there is no need to do too clear, should be controlled in around 50k, see a lot of apps similar background map is around 1M, it is not necessary. The background map generally uses JPG files.

5 iOS 1 time-fold, twice-fold, and 3 times-fold graphs

iOS does not use pixels as a unit, but instead uses the point unit, for IPhone4 and after, 1 points equals 2 pixels, and 1 points equals 1 pixels for iphone3gs and before. This ensures that the app that was previously running on the IPHONE3GS can be run on iPhone4 without modification. [3]

But images that were originally applied to iphone3gs, such as A.png's size of 40 pixels, looked blurry in iPhone4. So we have to prepare a 80-pixel image for A.png, named [email protected], also put in the app project, so the app will be run according to whether the screen is iphone3gs to select the appropriate image. IPHONE3GS will choose A.png,iphone4 will choose [email protected], if not this twice times chart, then choose A.png, so blurred.

Iphone4s, IPhone5, iphone5c, iphone5s, IPhone6, they all use [email protected] This twice-fold picture.

Until IPhone6 Plus, you will need to provide a picture of [email protected]. Without this 3 times times chart, it will choose 1 time times or twice times the graph, I tried only twice times the picture of the case, on the iphone6plus is indeed a blur effect.

So the question is, do we need to provide 1 time times, twice times, and 3 times times the 3 images for each diagram?

I see an international version of the app that handles pictures like this. It also produces 1 time times, twice times, and 3 times times more images per image, while providing multilingual text. This has led to a very large volume of the app. Looks a bit "rather wrong to kill 1000, not to let go of a" feeling, but as long as the reverse thinking, the picture is not missing, will never blur.

I have looked at a lot of pictures of the app and found that 1 time times the map is overwhelming, but not every 1 time times the graph has the corresponding twice times and 3 times times the graph, or only the corresponding twice times the graph without 3 times times the graph, of course, there are only twice times and 3 times times the graph and can not find 1 time times the picture. Picture management is a mess.

But in China, this is not the case. I have seen the data reported by Friends League, China iphone3gs users less than 0.1%. So, I have a bold idea, is to take the iOS app's package all 1 time times to kill, for each graph generated twice times and 3 times times the graph.

Many companies have the tools to generate twice times graphs and 3 times times graphs in batches based on 1 time times charts, and I have written one in C # once. But I found that there is a problem, not every picture after the conversion is clear, vector graphics can be stretched, but the stretched bitmap will be distorted. When I turn to 1 time times and twice times according to 3 times times graph, I find that the bitmap can be compressed, and the vector image will be distorted after compression. A good solution, then, is to classify all the images according to bitmaps and vectors, to provide 1 time times the graph, and then convert the batch to twice and 3 times times, while the bitmap is provided with 3 times times the graph, then the batch is converted to 1 time times and twice times the graph.

The solution given in this article does not reduce the volume of the iOS package, it may increase the size of the package, but it can manage the picture systematically, so that every picture is clear.

6 picture stretching and rotation in iOS

In the field of Android technology, popular. 9 Graph this concept, which greatly saves the volume of the picture. iOS can actually do so, using the iOS image stretching syntax, you can put a. 9 map full of an area, such as a button, as follows:

(UIImage *) Resizableimagewithcapinsets: (uiedgeinsets) capinsets

Where capinsets This parameter is a struct of type uiedgeinsets, the area covered by capinsets will remain unchanged, and the part that is not covered will be used for tiling.

The above method is only applicable to iOS5.0 and above, 5.0 of the following versions have another solution, but the current domestic app is only support more than 5.0 version, so I do not mention here.

For arrows, there is no need to prepare up and down 4 pictures, prepare a picture is enough, use the time in the direction of rotation can be.

7 Configuring animations with XML

Animations are mainly reflected in the animation in the Guide diagram, as well as the animation on the loading progress bar.

For developers who do app apps, they're not very good at animation, so they will ask the designer to provide animated GIF format, or more than 20 pictures to be carousel to achieve the effect of GIF animation, as everyone knows, in programming simple, but the volume of the app is correspondingly larger.

A relatively simple solution is to reduce the size of the animation by reducing the keyframes in the animation.

Be a little more formal, or use native Android or iOS native code. Any complex animation is made up of four simple animations: move, rotate, zoom, and fade. In Android, the use of XML to configure, these four simple animations have the corresponding XML syntax, you can quickly piece together a complex animation, and for iOS, have to use the encoding method.

Why don't we emulate the technology of the Android XML animation and tailor a set of XML animated tags for iOS? Instead of writing any OBJECT-C code, configure a few lines of XML to show an animation.

I've seen an app that uses this idea to configure properties for iOS animations in plist, 9-4, which is a panning animation:

Figure 9-4 Panning animation in a configuration file

Based on this configuration, an animation engine is also required to parse this configuration file and translate it into object-c native language. In design mode, we call it the interpreter pattern.

Not only that, I also need to have a test page, by modifying the properties of the animation on this page, and then clicking the button to see the effect immediately after the change, without having to rerun the app. Click a button to execute the XML script in the input box.

Using some of the above methods, we can reduce the 1 500k GIF files to a few images of 50k, and greatly save the development cost.

8 is iOS using storyboard or xib?

Sorry, I always don't like storyboard, but the existence is reasonable. I used to think that storyboard is bigger than Xib, which is one of the reasons for the size of the iOS installation package, so I did an exploratory job of splitting the pages in storyboard into several xib files and repackaging them, but the result was the same size.

The conclusion is that the use of storyboard does not affect the size of the IPA packet.

9 knowledge of font files

I found a font file in TTF format in an IPA package. At first I thought it was their app using a certain font, but opened the TTF file only to find that it is stored in a picture, 9-5 is shown:

Figure 9-5 icon image in the font file

Each icon corresponds to a hexadecimal number, for example, the first one is \ue600, and this value is unique.

Observing this font file, we see that all icons have the following commonalities:

• These icons are monochrome and can be set in the app's pages for other colors, but they must also be monochrome.

• These icons can be large and small, because they are a "font" and the font is a vector image, so the stretch is not distorted.

• This TTF file is small in size and smaller than a single PNG image.

Someone immediately reminds of iOS 1 time times, twice times and 3 times times, each time to prepare 3 pictures, respectively, for different phone models. If you make a font, you can reduce the volume, and no longer have to design @2x and @3x two sets of diagrams-this scheme is limited to monochrome images.

We generally go to the following website to convert the monochrome icon into a font file: Https://icomoon.io. Or use a tool like FontLab to make it yourself.

Next, let's look at how to promote this technology in the app.

1) Android

First put this font file in the assets directory, 9-6:

Figure 9-6 Font files in the assets directory

Next, we'll save the icon and hexadecimal encoding mappings in the drawable resource file:

This allows you to use the syntax of R.id.font_icon_1_normal to remove the image.

You can also design it as a Drawable object, and then set it to a control such as ImageView.

2) for iOS, realize the same idea.

First, we will add the Icmoon.ttf file to the project, as shown in 9-7:

Figure 9-7 the Icomoon.ttf file in Useiconinttf

In the Usericoninttf-info.plist file in the supporting files directory, add a configuration with the type specified as fonts provided byapplication, In which you add a declaration to the Icomoon.ttf font file, 9-8 shows:

Figure 9-8 Configuration in Useiconinttf-info.plist Icomoon.ttf

Like Android, in order not to encode numbers directly using the 16 mechanism such as \ue605, we define the icon and hexadecimal-encoded mapping relationship as a macro ttfconstants:

The next two lines of code will show the image in this font file:

10 face Picture package download

For emoji pictures. Many apps have integrated chat features, chat, nature will provide a variety of expression pictures, there is still map PNG, there are animated GIF, although each is not big, but the number of AH, all hit the package inside the release, will directly lead to the package becomes larger.

Considering the actual scenario, the user will not be able to open the app to use the chat function, so we can put these emoticons into a zip package, in the launch of the app, in a new thread in the asynchronous download the zip package and then extracted to the local. This allows you to use local images when chatting. For this, we have to do a version of the incremental upgrade function, to ensure that there are new emoji images can also be downloaded to the local after use.

11 Clear Unused pictures

For Android, Eclipse can automatically check out which pictures are not used.

For iOS, you need to write a small program to check which pictures are not used, note that for [email protected] and [email protected] processing, the first @2x and @3x to filter out.

Whether it's Android or iOS, even if you find a redundant picture, you can't delete it, because our program often decides which images to display in the code, we can only check the revision history of these images in the repository to determine whether they really do not need.

Proguard not just for confusion.

When it comes to Proguard in Android, the first thing we think of is code obfuscation, which is because we're constantly modifying proguard.cfg files to keep classes and methods that don't need to be confused.

In fact, Proguard can also slim APK, when packaged it will help to check the unused classes and methods to remove it. The most effective is the third-party SDK, such as Asmack, the SDK for XMPP has tens of thousands of methods, but in fact we only use a small part of it. Proguard will help us remove unused parts, greatly reducing the size of the APK.

13 using a PDF-formatted picture in iOS

In the process of studying the various apps, I found that an IPA file in an app has several images in PDF format.

In the study also found that there are several apps in the IPA package each picture is made into ImageSet form, each ImageSet directory in the same time there are 1 time times the picture, twice times and 3 times times the graph, 9-9 shows:

Figure 9-9 3 photos in Cancelselectedlistbtn.imageset directory

These two seemingly unrelated things, I see no connection, in fact, the use of iOS a new technology. Let's reference materials from these clues.

This is a few pdf pictures, I studied for half a day, please the designer students to make the same PNG picture, volume difference is not big, so compared with PNG no advantage. Since there are hundreds of images in the IPA package for this app, only these 3 images are in PDF format, so I suspect that this is just their new technology attempt.

After looking at the 3 images in the ImageSet catalogue, I found that every picture is like this one. This is not to make me realize, must be using what tools, once generated these pictures.

Search for keyword ios+pdf until you find the using Vector Images in Xcode 6 article [4], only to discover that this is a new technology that IOS8 appears, can only be used on XCode6.

Here is a brief introduction to this technology, first draw a PDF vector, and then XCode6 at compile time, will generate 3 PDF images, respectively, 1 time times, twice times, 3 times times the graph. This avoids the blurred picture caused by the image, but also avoids the need for designers to prepare 3 sets of diagrams each time the trouble.

But why do we have to put some images on the user's iphone that will never be used? Apple's painstaking approach to such a technology still does not address the growing reality of app volume, and the technology will only make the app more bulky-and that's where the user's pain points. If I am to design the next version of iOS, I will let the app only include PDF vector, only when the user downloaded the app to start the installation, will be based on the user's model, the PDF to the corresponding image, such as the iphone 6+ app generated image is 3 times times the picture.

I heard that at the WWDC15 conference held on June 9, 15, Apple launched the Appthinning function, how the effect needs to be further observed and researched.

are iOS packages always larger than Android packs?

I compared the 100 apps and found that iOS and Android versions of the same app, iOS's IPA package is a lot larger than the Android APK package.

But there is always a maverick app, such as a famous video playback software, Android version 23.2M, and iOS version is only 20.5M. I initially thought that the Android version of the app was problematic, so I looked at the contents of the Android package, and I found out that the company's Android technology was so refined that it was larger than the iOS version, Because the Android version has a different picture and layout for dozens of resolutions, to ensure that the user experience is consistent at any resolution.

As shown in 9-10, there are 12 layout layouts:

Figure 9-10 The Layout folder in an Android project

Drawable folder is more, up to 28, confined to space, here is not the map.

These are just exceptions, and most apps aren't as detailed as they say:

1) First, it does not support so many resolutions. This is due to the current development situation of the app. On the one hand, product managers and designers in the lack of manpower, on the other hand, because designers prefer the iphone, generally will only give the iphone version of the design, and then let Android developers according to the design of the iphone to adapt. So the Android developers had to do the UI adaptation, using. 9 Drawing technology, it is not possible to find the designer to draw a new picture. So we will see the iphone app is mostly very sophisticated, the corresponding Android version is very rough, because the Android app UI is a lot of developers with their own aesthetic to two times processing.

2) Second, you will find that different content is placed in the various drawable directory images. Use the developer's picture to speak and find it. For example, drawable directory decentralization of various selector files, drawable–hdpi directory decentralized food class pictures, Drawable-large directory to decentralize tickets pictures. So, there are a lot of catalogs, but in fact there is only a set of figures. As everyone knows, this reduces the speed of the app, because it can not find a picture in the corresponding resolution of the drawable directory, will walk through each drawable directory of the picture, until the location of the image is found.

Bidding technology three glimpses of the size of the installation package