1. 简介
WebP 是 Google 的一种可以同时提供有损压缩(像 JPEG 一样)和透明度(像 PNG 一样)的图片文件格式,不过与 JPEG 或 PNG 相比,这种格式可以提供更好的压缩。Android 4.0(API 级别 14)及更高版本支持有损 WebP 图片,Android 4.3(API 级别 18)及更高版本支持无损且透明的 WebP 图片。
2. WebP的优势
WebP 的优势体现在它具有更优的图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都非常优秀、稳定和统一。
结论:
- PNG 转 WebP 的压缩率要高于 PNG 原图压缩率
- 支持有损与无损压缩
- 转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)
- 转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题
网页演示:
3. 将图片转换为 WebP 格式
Android Studio 可以将 PNG、JPG、BMP 或静态 GIF 图片转换为 WebP 格式。您可以转换单张图片,也可以转换包含多张图片的文件夹。要转换某张图片或包含多张图片的文件夹,请按照下列步骤操作:
右键点击某个图片文件或包含一些图片文件的文件夹,然后点击 Convert to WebP。
-
Converting Images to WebP 对话框随即打开。默认设置取决于当前模块的
minSdkVersion
设置。
选择有损或无损编码。无损编码仅在您的
minSdkVersion
设置为 18 或更高时可用。如果选择有损编码,请设置编码质量,并选择是否在保存之前查看每张转换后图片的预览效果。
您还可以选择跳过编码后版本大于原始版本的所有文件,或所有具有透明度通道或 Alpha 通道的文件。由于 Android Studio 仅允许您在minSdkVersion
设置为 18 或更高时创建透明的 WebP 图片,因此,如果minSdkVersion
低于 18,系统会自动选中 Skip images with transparency/alpha channel 复选框。点击 OK 以开始转换。如果要转换多张图片,只需一步即可完成转换操作,并且可以撤消转换操作以便一次性还原已转换的所有图片。
如果您在上面选择了无损转换,系统会立即进行转换。图片会在原始位置进行转换。如果您选择了有损转换,请继续执行下一步。-
如果您选择了有损转换,并且选择在保存之前查看每张转换后图片的预览效果,那么 Android Studio 会在转换过程中显示每张图片,以便您检查转换结果。(如果您未选择查看预览,Android Studio 会跳过此步骤,并立即转换图片。)在预览步骤中,您可以单独调整每张图片的质量设置,如下所述。
在上图中,左侧是原始 JPG 图片,右侧是有损编码 WebP 图片。对话框中显示了原始图片和转换后图片的文件大小。您可以向左或向右拖动滑块以更改质量设置,并能够立即看到编码图片的效果和文件大小。
中间区域显示了原始图片和编码后图片的哪些像素存在差异。由于质量设置为 75%,因此这两种图片之间几乎没有任何差异。下图显示了质量设置为 0% 的同一编码图片。
- 点击 Finish。图片会在原始位置进行转换。
4. 将 WebP 图片转换为 PNG 格式
- 在 Android Studio 中右键点击相应 WebP 图片,然后点击 Convert to PNG。
- 系统会显示一个对话框,询问您是要将该图片转换为 PNG 格式、删除原始 WebP 文件,还是保留原始 WebP 文件以及新的 PNG 文件。要删除原始 WebP 文件,请点击 Yes;要保留 WebP 文件以及 PNG 文件,请点击 No。图片会立即转换。
5. 如何选择适合的图片格式:
不同的图片格式适用于不同类型的图片。JPG 和 PNG 的压缩过程截然不同,产生的结果也差异显著。
PNG 和 JPG 之间的选择往往取决于图片本身的复杂程度。下图显示的两张图片因开发者采用不同的压缩方案而出现了截然不同的结果。左侧的图片包含许多小细节,因此使用 JPG 进行压缩的效率更高。右侧的图片包含连续的相同颜色,使用 PNG 进行压缩的效率更高。
WebP 格式支持有损和无损两种模式,对 PNG 和 JPG 来说都是理想的替代选择。唯一需要注意的是,它仅在搭载 Android 4.2.1(API 级别 17)及更高版本的设备上受到原生支持。幸运的是,大多数的设备都满足该要求。
下图提供了一个简单的可视化图形来帮助您决定应使用的压缩方案。
6. 结尾
已知问题:
- Android 无法直接判断WebP是动态还是静态图片。(建议用文件名区分)
- Android studio 无法将gif转为WebP。(Google提供转换gif为webp的工具“gif2webp”)