性能优化专题八--webp图片压缩实战

webp压缩图片

• webp与哈夫曼编码区别：

webp编码对于哈夫曼压缩性能更优异，哈夫曼与webp本质上都是从编码来解决图像压缩，哈夫曼是对rgb的元数据进行变频压缩，webp编码是通过预测技术对图片压缩

• 预测技术(VP8编码 H264)

WebP 压缩使用的图像编码方式与 VP8 视频编码对关键帧压缩方式相同，VP8是视频编码的格式一个电影可以从1G压缩到10M~100M，压缩率为千分之一到百分之一，换句话解释：Google将视频编码技术搬到了图片上 形成了Webp编码格式，因此能够大大压缩图片存储空间。WebP 会将图片划分为两个 8x8 色度像素宏块和一个 16x16 亮度像素宏块。在每个宏块内，编码器基于之前处理的宏块来预测冗余动作和颜色信息。通过图像关键帧运算，使用宏块中已解码的像素来绘制图像中未知部分，通过预测模式 去除冗余数据，实现更高效的压缩。

• 预测模式

1. H_PRED（水平预测）： 用宏块左边的列 L 的填充块的每一列；
2. V_PRED（垂直预测）： 用宏块上边的行 A 的填充宏块的每一行；
3. DC_PRED（DC预测）： 用行 A 和列 L 的像素的平均值作为宏块唯一的值来填充宏块；
4. TM_PRED（TrueMotion预测）： 除了行 A 和列 L 之外，用宏块上方和左侧的像素P、A（从P开始）中像素块之间的水平差异以列 L 为基准拓展每一行

• webP优势

1. 更小的文件尺寸;

2. 更高的质量——与其他相同大小不同格式的压缩图像比较。

• WebP的劣势

1. 在早些年代 那个时候还没有webp，比如Android4.3之前他们是不支持webp的

2. 根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。

   在编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计，主要问题在于1.5倍的解码速度是否会影响用户体验。WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了。所以，使用WebP基本没有技术阻碍，还能带来性能提升以及带宽节省。

• WebP兼容所有Android系统平台

搜索libwebp，下载地址:http://downloads.webmproject.org/releases/webp/libwebp-1.0.2.tar.gz

• 采用libwebp的优势

1. 减少webp解码时间 可以超过 jpg 和png解码的时间
2. 降低编码的时间，比原生的编码小号时间更短 30ms
3. 增加兼容性，兼容所有型号的手机，4.3以下也是兼容的 播放器

libwebp、webp与jepg、png图片编解码速率对比

        //webp，JPEG，png   解码速度测试
        long l = System.currentTimeMillis();
        BitmapFactory.decodeResource(getResources(), R.drawable.splash_bg_webp);
        Log.e(TAG, "解码webp图片耗时:" + (System.currentTimeMillis() - l));
        l = System.currentTimeMillis();
        BitmapFactory.decodeResource(getResources(), R.drawable.splash_bg_jpeg);
        Log.e(TAG, "解码jpeg图片耗时:" + (System.currentTimeMillis() - l));
        l = System.currentTimeMillis();
        BitmapFactory.decodeResource(getResources(), R.drawable.splash_bg_png);
        Log.e(TAG, "解码png图片耗时:" + (System.currentTimeMillis() - l));


        //webp，JPEG，png   编码速度测试
        Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.splash_bg_png);

        l = System.currentTimeMillis();
        compressBitmap(bitmap, Bitmap.CompressFormat.PNG, Environment.getExternalStorageDirectory() + "/test.png");
        Log.e(TAG, "------->编码png图片耗时:" + (System.currentTimeMillis() - l));

        l = System.currentTimeMillis();
        compressBitmap(bitmap, Bitmap.CompressFormat.JPEG, Environment.getExternalStorageDirectory() + "/test.jpeg");
        Log.e(TAG, "------->编码jpeg图片耗时:" + (System.currentTimeMillis() - l));

        l = System.currentTimeMillis();
        compressBitmap(bitmap, Bitmap.CompressFormat.WEBP, Environment.getExternalStorageDirectory() + "/test.webp");
        Log.e(TAG, "------->编码webp图片耗时:" + (System.currentTimeMillis() - l));

//        libwebp 编解码速度测试
        l = System.currentTimeMillis();
        decodeWebp();
        Log.e(TAG, "libwebp解码图片耗时:" + (System.currentTimeMillis() - l));
        l = System.currentTimeMillis();
        encodeWebp(bitmap);
        Log.e(TAG, "libwebp编码图片耗时:" + (System.currentTimeMillis() - l));

可以看到每种图片类型的编解码耗时：

项目需要使用存储权限，为了使用libwebp，引入了so库以及jar包：

完整项目：https://github.com/buder-cp/base_component_learn/tree/master/performanceOPT/buderdn18_webp