Background and Current Situation
With the iteration of the version and the increase of business, the size of QQ Music APK has exceeded 25M, and the size of RES directory occupies more than 5.5m. Therefore, the technical requirement of sliming installation package is proposed. With the increase of business, there are more and more pictures. Through analysis, it can be known that PNG images are the largest number of pictures in the project. For the introduction of PNG images, please refer to PNG file Format. In order to achieve the task of packet reduction, image compression is a very important part.
In order to realize the compression of PNG images, the previous processing method was to compress them locally, submit them to SVN, and then package them for distribution. Generally, online compression tools are used to process PNG images in the RES directory manually in batches. The problems that may occur in this way are as follows:
1) In pursuit of high compression rate, it is easy to repeatedly compress a picture, resulting in serious distortion of the picture;
2) Unable to customize parameter development, unable to meet development requirements;
3) The compression efficiency is relatively low, and each release requires a manual compression of the image.
Compression tool and principle analysis
tinypng
1) Principle introduction
According to Tinypng.com/, Quantization is a technique that combines similar colors in images, condensing 24-bit PNG images into much smaller 8-bit images, and removing unnecessary metadata. Images exported from tools such as Photoshop will carry this information), which almost perfectly supports the transparency of the original image. Some documentation indicates that Tinypng uses pngQuant, Optipng, and advpng scripts. The compression rate of pictures can reach more than 50%.
2) Online API
It provides an online API for secondary development, supporting Ruby, PHP, Node.js, Python, Java and other languages. The source address of the Java library is Tinify-Java. However, the online API requires apI-key application, and there is a limit to the number of calls. It can be called 500 times for free. The development network environment inside the company cannot run properly, and the interface cannot be invoked online through THE API.
pngquant
According to pngQuant.org/, pngQuant is a lossy PNG compression open source library that provides both command line and source code form. Convert 24 – or 32-bit RGBA PNGS to 8-bit PNGS and retain transparency channels. Conversion through this library can significantly reduce PNG file sizes (typically 70%). The resulting image files are compatible with all modern Web browsers and perform better under IE6 than the 24-bit PNGs. Its features are:
1) Using Vector_quantization algorithm to generate high-quality color range;
2) The unique adaptive jitter algorithm has stronger anti-noise performance than the standard FloydSteinberg algorithm;
3) Easy and integrated, provides shell script, graphical interface, server library, PS plug-in;
4) Fast mode for processing large numbers of pictures. The source library address is pngquant.
Other PNG compression tools
Popular PNG compression tools on the Internet mainly include ImageAlpha, ImageOptim, PNGCrush, OpTIPng, PNGOut, PNGNQ, ADVPNG and so on. Their comparison can be found in the following article;
1) John Wong’s extreme compression of PNG images, introducing ImageAlpha and ImageOptim compression methods;
2) PngCrush, OpTIPng, PNGOut, PNGNQ, etc.
The following table compares the compression tools:
According to the data, Tinypng, PNGQuant, ImageAlpha and PNGNQ are lossy compression, basically using quantization algorithm, converting 24-bit PNG images into 8-bit PNG images to reduce the number of colors. Pngcrush, OpTIPng, PNGOut and ADVPNG are lossless compression, using DEFLATE algorithm based on LZ/Huffman to reduce data in IDAT chunk area of image. Generally, the compression rate of lossy compression is much higher than lossless compression.
Compression contrast
For comparison of the compression rates of some popular PNG compression tools, see: Comparison of the compression rates of common PNG compression tools. Based on the above references, this paper mainly compares PngQuant and Tinypng.
1. Compression and comparison of single pictures
Several PNG images that occupy the largest space in QQ music Android project are selected to compare the compression effects. The pngquant.exe script and tinypng website are used to compress a single image respectively. The compression rate is shown below :(pngquant uses the default compression quality)
As you can see from the table, tinypng’s compression rate is about 10% higher than PngQuant’s. In the process of pngQuant compression, the size of the compressed image will be larger than the original image. Therefore, in the actual process of using the script compression, the size of the compressed image and the original image should be compared. If the size of the compressed image becomes larger, it should be discarded.
2. Batch image compression comparison
Due to the large number of PNG images in the project, it is impossible to compress them individually, and they need to be compressed in batches. Tinypng’s batch compression can only be carried out on the official website at present (due to the limited number of images and the limited development network environment due to the development of online API). Pngquant batch compression can be fully customized by their own development, call the compression script for compression, you can download the Windows and Linux version of the run file on the official website.
Select 106 PNG images with a size of more than 4KB in the project for compression, and the effect comparison is as follows :(pngquant uses the default compression quality)
As can be seen from the table, tinypng is prone to upload failures and other errors during batch uploading due to the online compression of websites, while PngQuant uses local script compression, so this problem can be effectively avoided. Tinypng uses a variety of compression algorithms, and the compression performance is better than PngQuant, about 12% more compression, but since it is lossy compression, you should also consider the display effect of the compressed image while trying to maximize the compression ratio.
3. Run the script locally to compress the drawable directory
Use the pngQuant script to compress drawable, drawable-hdpi, drawable-ldpi, drawable-mdpi, drawable-xhdpi, drawable-xhdpi-v21, and drawable- XXH in the resource directory res Dpi, drawable- XXxhPI and other 8 folders, in the case of multi-threading, a total of 17s940ms. The resource directory of the main line version 48322 is compressed with various compression qualities (achieved by setting the quality parameter). The comparison results are shown in the following figure. Considering the compression rate and post-compression effects, the compression scheme of quality 90 is finally adopted, which can reduce 1.97MB of packets.
4. Conclusion
On the basis of comprehensive comparison between Tinypng and PngQuant, the project finally considers using PngQuant for batch compression of PNG images. The main considerations are as follows:
1) Although the compression rate is lower than that of Tinypng when pngQuant adopts the default compression quality, tinypng is an online compression tool, so it is difficult to customize control and maintenance. The display effect of Tinypng after compression needs to be further verified.
2) At the same time, pngQuant scripts can customize the compression quality, using lower compression quality (such as 90), the compression rate is higher than Tinypng, and PngQuant is open source, easy to maintain, and risk controllable.
Compression process using PngQuant
1. Gradle compilation
PNG image compression project class stored in project directory buildSrc, was developed by using groovy ImageCompressionTask. Groovy (developed by haodongyuan), Gradle or build_server.gradle is referenced as follows :(manually run compressImages, where quality indicates compression quality and compress indicates whether compression is enabled)
import com.tencent.qqmusic.ImageCompressionTask
task compressImages(type: ImageCompressionTask) {
multiThread = true
verbose = false
backupRoot = new File('res-backup')
sourceRoot = rootDir
quality = 90
compress = true
folders = [
"res/drawable",
"res/drawable-hdpi",
"res/drawable-ldpi",
"res/drawable-mdpi",
"res/drawable-xhdpi",
"res/drawable-xhdpi-v21",
"res/drawable-xxhdpi",
"res/drawable-xxxhdpi"
]
}Copy the code2.RDM automated compilation
If you want to automate gradle compilation, you need to create a task dependency using the following statement:
copyNativeLibs.dependsOn compressImagesCopy the codeAnd turn off the Android compiler AAPT for compression:
aaptOptions {
cruncherEnabled = false
}Copy the codeThe Linux version of pngQuant relies on some of the so files to run. You need to add the so library to the build.sh file:
LD_LIBRARY_PATH=$(CD 'dirname $0'; pwd)/scripts/Tools/pngquanti/linux/lib ln -s $(cd `dirname $0`; The PWD)/scripts/Tools/pngquanti/Linux/lib/liblcms2. So the mid-atlantic moved $(CD ` dirname $0 `; pwd)/scripts/Tools/pngquanti/linux/lib/liblcms2.so.2 ln -s $(cd `dirname $0`; The PWD)/scripts/Tools/pngquanti/Linux/lib/ld - 2.23. So $(CD ` dirname $0 `; pwd)/scripts/Tools/pngquanti/linux/lib/ld-linux-x86-64.so.2 ln -s $(cd `dirname $0`; The PWD)/scripts/Tools/pngquanti/Linux/lib/libpng15. So the 15.27.0 $(CD ` dirname $0 `; pwd)/scripts/Tools/pngquanti/linux/lib/libpng15.so.15Copy the codeThe automatic compilation process is as follows:
Can know from the flow chart of compression, PNG images in the project resource directory data too much, the default script should adopt multithreading implementation compression, in order to avoid repeated compression, information need to read before compressing image compression, compressed no longer compressed, at the same time, the compression is completed, need to compress the processed images to compress information, Easy to read next time. Due to the particularity of the PngQuant script, you need to determine whether the compressed file is larger than the original file. If the compressed file is larger than the original file, you need to delete it and record it.
3. The advantages
There are three main advantages to automatic compression using PngQuant:
1) PngQuant is selected as the PNG image compression script, which can maximize compression without affecting the image display effect (compression quality 90);
2) At the same time, groovy scripts are used to batch compress images and add additional compression information, which can improve compression efficiency and prevent repeated compression;
3) After RDM automatic compression, it can effectively reduce the workload of developers and facilitate later maintenance.
JPG compression
JPG compression through, the company’s internal image tool: image JPG compression; Online JPG compression tool tinyjpg:tinyjpg.com/; Script tool jPEGtran: jpegclub.org/jpegtran/, etc. Because the excellent image tool is lossless compression, professional excellent image team to maintain, and the compression rate can reach more than 20%, while tinyJPG is lossy compression, there will be repeated compression and inconvenient maintenance, so the project priority to use the excellent image tool for compression.
Select 49 JPG files under the project RES directory for compression comparison, which can reduce 0.23MB, the effect is as follows:
Image compression in third-party JAR packages
By observing the APK package, it can be found that there are some newly generated image directories in assets directory, including common, Drawable, images and Recommend directories. Through analysis, it can be found that these PNG images are from the third-party JAR package referenced by the project. Where tvk_mediaPlayer-v3.6.0.10721.jar generates common and Recommend directories, and videoad-SDK-1.7.2-20160527.jar generates images directories. Weibosdkcore_3.1.2. jar generates drawable related directories. It can be known that the optimization space of this part of images is limited, and the key is to manually compress PNG images for TVK_MediaPlayer, VideoAD-SDK and weiboSDKCore jar packages. That’s a total reduction of 41KB.
Part of jar package PNG image compression reduced size comparison:
conclusion
This project image compression process, mainly learned the main PNG image compression script (Tinypng/PngQuant/Pngout) and JPG image compression tool (excellent/TinyJPG), after comparison, finally choose PNGQuant and excellent image as the project PNG and JPG image compression tool. In order to achieve automatic management of PNG image compression, pngQuant script is integrated into RDM compilation. The main problems are as follows:
1) Groovy script to execute Linux command, run bin file in Linux environment, need to use chmod permission first;
2) Gradle compile order problem. According to the dependency chain of compile process, the task of compressImages should be placed at the beginning;
3) PngQuant relies on some SO libraries to run, so it needs to reset “LD_LIBRARY_PATH” to load the SO library directionally, and run the ln command to set the soft connection relationship of the SO library.
4) Path recognition problem. At the beginning, the image path could not be found. Later, it was found that double quotation marks (” “) were added when the compressed script path was referenced, which made it unrecognizable on the RDM platform.
5) Increased RDM automatic compilation time, because JPG images in res directory and PNG images in third-party JAR packages are manually compressed locally, there is no need to consider the time problem. PNG images under the RES directory are automatically compressed on the RDM platform. Considering the time cost, as shown in the following figure, it will take about 26 seconds more with the compression script.
Through this picture compression optimization, the following objectives can be achieved:
1) PNG in the RES directory can be reduced by 1.97MB. The package reduction effect of PNG is shown in the following figure. JPG images in the RES directory can be reduced by 200KB, and the size of PNG images in the third-party JAR package (assets) directory can be reduced by 40KB. A total of 2.22MB can be reduced;
PNG before compression:
After PNG compression:
2) Automatic PNG image compression processing, greatly improving the development efficiency, convenient maintenance and management;
3) Groovy scripts can be used to customize compression quality and write compression information, effectively control compression rate and intelligent judgment, and avoid secondary compression.
reference
[1] blog.csdn.net/bisword/art…
[2]tinypng.com/
[3]pngquant.org/
[4] www.jianshu.com/p/a721fbaa6…
[5] johnwong. Making. IO/showcase / 20…
[6] ued.ctrip.com/blog/image-…
[7] advsys.net/ken/utils.h…
[8] jamiemason. Making. IO/ImageOptim -…
[9] my.oschina.net/shede333/bl…
[10]tinyjpg.com/
[11] www.oschina.net/translate/4…