webP技术在Android app中的探索与实践

前几天在微信公众号看到一篇关于App如何瘦身的文章，里面有提到过使用webP技术来压缩图片，于是乎就上网寻找关于webP技术的资料，并研究了如何在Android app中使用webP技术来让Android app瘦身。
webP是Google提出来的一种可以提供有损压缩与无损压缩的图片文件格式。主要的目的是为了减少数据量、加速网络传输的目的而开发出来的。关于更多的webP信息，可以自己Google。这里就不详细说了。
接下来我们开始说明如何在Android app当中使用该项技术：
1、打开浏览器并输入下面的网址https://github.com/alexey-pelykh/webp-android-backport，该网址是webP项目库的GitHub地址。从该项目库
的介绍可以看出，该项目库主要针对的是Android 4.0版本以下的系统（其实Android4.0以上版本的系统已经能够自动支持webp技术，不用使用该项目库去解析webP的图片了）。
2、Win+R快捷键打开运行窗口，并输入cmd打开命令行窗口（我是在Windows系统下操作的）。使用git clone --recursive https://github.com/alexey-pelykh/webp-android-backport.git ，然后按下回车键。（记住一定要加上--recursive选项，因为该项目库在webp-android-backport-library/jni的webp文件夹引用了其他仓库的子模块，所以要使用--recursive选项来将该子模块下载下来。）具体操作下图所示：





其中的https://github.com/alexey-pelykh/webp-android-backport.git 是该项目库的clone URL，可以在第一步的GitHub项目库中的右边找到HTTPS clone URL，然后点击复制面板，就可以复制到该clone URL。具体操作如下图所示（点击红色箭头指向的复制面板复制）：



3、完成了前面的两步之后，我们已经获取了该webP项目库了，然后我们下载NDK并使用NDK将其编译成共享链接库文件（.so文件）。我使用的是NDK版本是android-ndk-r9-windows-x86（32位操作系统），大家可以根据自己的电脑的配置来选择相应的NDK版本。下载完毕后，将含有ndk-build.cmd的文件路径配置到系统的PATH环境变量中。
4、然后重启一下命令行窗口（关闭后再打开，如果没有的这样做，好像新配置的ndk的PATH环境变量识别不出来）。接着切换当前的目录到刚才下载下来的webP项目库目录，该目录下的文件如下图所示：





5、然后使用ndk-build命令开始编译共享链接库，编译完成的最后会看到该目录下多了libs和obj这两个文件夹（我们要使用的是libs这个文件夹，里面有生成的共享链接库），具体操作如下图所示：





6、然后我们将webp-android-backport-library作为依赖库添加到你的Android项目中，然后把libs文件夹下的全部文件当做webp-android-backport-library项目的依赖（我使用的IDE是Intellij Idea），最后我们就可以使用该web项目库来解析webP图片和编码普通图片到webP图片了。
7、最后使用webP项目下的example-project来实验一下结果的正确性：





我这里使用的是Google Nexus One模拟器（2.3.7系统），点击Load embeded按钮，可以看到webP图片被正确地解析出来了。后面两个功能没有实验，不过我实验了另外一个功能，即将一幅图（.jpg）放在drawable-hdpi文件夹下，然后使用nativeEncodeBitmap将该bitmap压缩，75代表的是图片质量为原来图片的75%（75是最佳压缩选择，此时的压缩率最高，而且肉眼也分辨不出压缩前后图片的质量问题；若是100，则压缩后的图片大小反而变大了，可以参考腾讯ISUX的webP探寻之路这篇文章：isux.tencent.com/introduction-of-webp.html）
Bitmap bitmap = BitmapFactory.decodeResource(SampleActivity.this.getResources() ,
R.drawable.first);
byte[] webpImageData = WebPFactory.nativeEncodeBitmap(bitmap, 75);
try {
FileOutputStream dumpStream = new FileOutput
Stream(new File(Environment.getExternalStorageDirectory(), "dump.webp"));
dumpStream.write(webpImageData);
dumpStream.close();
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
}
实验说明了webP这项技术还是挺好用的，特别是对于现在的App来说，基本上图片占了大部分，webP技术提供了图片的压缩，但是却并不影响观看的质量，这不仅仅可以使得图片的传输速率提高了，也还大大地提高了用户体验。

关于webP的一些参考资料：
isux.tencent.com/introduction-of-webp.html
http://en.wikipedia.org/wiki/WebP https://developers.google.com/speed/webp/ http://tech.qq.com/a/20140721/074637.htm http://faso.me/slides/2014/webp/ http://www.webpagetest.org/video/compare.php?tests=141121_3W_JT7,141121_6Q_JSM