webp简介
Webp是一个现代的图片格式提供优秀的无损和有损压缩。使用Webp我们可以创建更小更丰富的图片。
Webp无损图片比PNG图片的size小26%。Webp有损图片在同等SSIM（结构化相似）质量下比JPEG小25-34%。无损Webp支持透明度（透明通道）只占22%额外的字节。如果可以接受有损RGB压缩，有损Webp也支持透明度，通常比PNG文件size小3倍。
webp图片转换
Android 4.0 (API level 14)及以上支持有损Webp图片，Android 4.3 (API level 18)及以上支持无损和透明度Webp图片。
注意：因为无损和透明度Webp图片只在Android 4.3 及以上可用，所以如果需要显示必须声明minSdkVersion为18或更高才能使用Android Studio创建无损或透明度Webp图片。
Android Studio 可以将 PNG、JPG、BMP 或静态 GIF 图片转换为 WebP 格式。您可以转换单张图片，也可以转换包含多张图片的文件夹。要转换某张图片或包含多张图片的文件夹，请按照下列步骤操作：
- 右键点击某个图片文件或包含一些图片文件的文件夹，然后点击 Convert to WebP。
- 会弹出 Converting Images to WebP 对话框。默认设置依赖于当前module的minSdkVersion的设置。
- 选择有损或无损编码。无损编码仅在
minSdkVersion设置为 18 或更高时可用。如果选择有损编码，可以编码质量，并选择是否在保存之前查看每张转换后图片的预览效果。还可以选择跳过如果转换后的图片大于原图和跳过包含透明通道的图片。因为Android Studio只允许minSdkVersion大于等于18时创建透明度Webp图片，因此，如果minSdkVersion低于 18，系统会自动选中 Skip images with transparency/alpha channel 复选框。
-
点击 OK 以开始转换。如果要转换多张图片，只需一步即可完成转换操作，并且可以撤消转换操作以便一次性还原已转换的所有图片。如果您在上面选择了无损转换，系统会立即进行转换。图片会在原始位置进行转换。如果您选择了有损转换，请继续执行下一步。
-
如果选择有损转换，并且勾选了对转换后的图片在保存之前进行预览，Android Studio会在转换期间显示每张图片你可以检查转换结果。（如果你没有选择预览，Android Studio会跳过这一步并立即执行转换。）在预览期间，你可以单独设置每张图片的质量，如下图所示。
上图左侧是原始 JPG 图片，右侧是有损编码 WebP 图片。对话框中显示了原始图片和转换后图片的文件大小。您可以向左或向右拖动滑块以更改质量设置，并能够立即看到编码图片的效果和文件大小。
中间区域显示了原始图片和编码后图片的哪些像素存在差异。在上图中，由于质量设置为 75%，因此这两种图片之间几乎没有任何差异。下图显示了质量设置为 0% 的同一编码图片。
注意：如果你设置质量为100%并且minSdkVersion大于等于18，Android Studio会自动转换为无损编码。
给预览的每张图片选择一个质量。如果转换多张图片，点击Next跳到下一张图片。
- 点击Finish完成转换。
webp图片转换优缺点
优点
- 转换后的 WebP 体积大幅减少，图片质量也得到保障（同时肉眼几乎无法看出差异）
- 与其他相同大小不同格式的图像比较，webp质量更高
缺点
根据Google的测试，目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍。
在编码方面，一般来说，我们可以在图片上传、保存时生成一份WebP图片或者在第一次访问jpg图片时生成WebP图片，对用户体验的影响基本忽略不计，主要问题在于1.5倍的解码速度是否会影响用户体验。WebP虽然会增加额外的解码时间，但由于减少了文件体积，缩短了加载的时间，页面的渲染速度加快了。同时，随着图片数量的增多，WebP页面加载的速度相对JPG页面增快了。所以，使用WebP基本没有技术阻碍，还能带来性能提升以及带宽节省。
webp与jpeg、png图片编解码速率对比
private void webpTest() {
long currentTimeMillis = System.currentTimeMillis();
BitmapFactory.decodeResource(getResources(), R.drawable.bg_webp_001);
Log.e(TAG, "解码webp图片耗时:" + (System.currentTimeMillis() - currentTimeMillis));
currentTimeMillis = System.currentTimeMillis();
BitmapFactory.decodeResource(getResources(), R.drawable.bg_jpg_001);
Log.e(TAG, "解码jpeg图片耗时:" + (System.currentTimeMillis() - currentTimeMillis));
currentTimeMillis = System.currentTimeMillis();
BitmapFactory.decodeResource(getResources(), R.drawable.bg_webp_011);
Log.e(TAG, "解码webp图片耗时:" + (System.currentTimeMillis() - currentTimeMillis));
currentTimeMillis = System.currentTimeMillis();
BitmapFactory.decodeResource(getResources(), R.drawable.bg_jpg_011);
Log.e(TAG, "解码jpeg图片耗时:" + (System.currentTimeMillis() - currentTimeMillis));
currentTimeMillis = System.currentTimeMillis();
BitmapFactory.decodeResource(getResources(), R.drawable.bg_png_011);
Log.e(TAG, "解码png图片耗时:" + (System.currentTimeMillis() - currentTimeMillis));
new Thread(new Runnable() {
@Override
public void run() {
//webp，JPEG，png 编码速度测试
Bitmap bitmap = BitmapFactory.decodeResource(getResources(), R.drawable.bg_jpg_001);
long timeMillis = System.currentTimeMillis();
compressBitmap(bitmap, Bitmap.CompressFormat.PNG, Environment.getExternalStorageDirectory() + "/test.png");
Log.e(TAG, "------->编码png图片耗时:" + (System.currentTimeMillis() - timeMillis));
timeMillis = System.currentTimeMillis();
compressBitmap(bitmap, Bitmap.CompressFormat.JPEG, Environment.getExternalStorageDirectory() + "/test.jpeg");
Log.e(TAG, "------->编码jpeg图片耗时:" + (System.currentTimeMillis() - timeMillis));
timeMillis = System.currentTimeMillis();
compressBitmap(bitmap, Bitmap.CompressFormat.WEBP, Environment.getExternalStorageDirectory() + "/test.webp");
Log.e(TAG, "------->编码webp图片耗时:" + (System.currentTimeMillis() - timeMillis));
}
}).start();
}
结果输出如下,可以看到每种图片类型的解编码耗时:
从上图可以看出，webp的解码耗时相对jpeg和png格式相对较高(1.5-2倍)，但是由于解码时间在都是ms级别，所以影响相对不是很大，而且webp图片占用体积更小，缩短了加载的时间，在图片比较多的页面(比如首页瀑布流)，使用webp图片反而能够加快渲染速度，提高页面流畅度。
关于使用webp对内存和cpu等影响，两者影响基本不大，具体可以参考这篇文章：https://developer.aliyun.com/article/32617 。