客户端图片AVIF编码功能说明

本文介绍如何在移动客户端上将图片编码为AVIF格式,并提供示例demo帮助您更好地接入该功能。

重要

AVIF图片编码功能目前为实验性,可能在未来版本中有所调整或更新。请在生产环境中谨慎使用,并定期关注文档更新。

AVIF编码

AVIF(AV1 Image File Format)是一种基于AV1视频编码的图像压缩格式,提供高效的压缩能力和更小的文件体积。与其他图像格式(如JPEGPNG)相比,AVIF不仅支持高动态范围(HDR)和透明通道,还能在更小的体积下实现更高的图像质量。目前,OSS服务全面支持AVIF图像的编解码。

操作步骤

本文中的接入说明给出的是代码核心片段,如需获取详细的接入参考和完整代码,请参考工程iOS示例Android示例

iOS平台接入

依赖引入

由于Apple尚未在iOS平台上原生支持AVIF格式,iOS客户端需要引入第三方库libavifsvt-av1来实现AVIF编码功能。

重要

开源版本的libavifsvt-av1库存在某些局限性(如不支持奇数尺寸图片编码、性能较低等),我们在开源基础上进行了优化,提升了编码性能。建议您集成我们优化后的版本。

通过CocoaPods集成libavifsvt-av1:

  1. Podfile文件中添加阿里云的Pod仓库声明:

    source 'https://github.com/aliyun/aliyun-specs.git'
  2. 添加AVIF编解码相关库的依赖:

    pod 'SDWebImage'
    pod 'SDWebImageAVIFCoder', '0.12.1'
    pod 'libavif/svt-av1', '1.1.1'
    pod 'svt-av1', '1.2.2'
    pod 'libdav1d', '1.2.0'

图片编码调用

SDWebImage提供外接编解码库接口,支持快速实现特定格式图片的编解码。通过接入SDWebImageAVIFCoder,用户可以利用SDWebImage将图片转换为AVIF格式。

  1. AppDelegate.m文件中引入SDWebImageAVIFCoder:

    SDImageAVIFCoder *avifCoder = [SDImageAVIFCoder sharedCoder];
    [[SDImageCodersManager sharedManager] addCoder:avifCoder];
  2. 使用SDWebImage的编码方法对图像进行AVIF编码:

    // 需要编码的图片
    UIImage *image = [UIImage imageNamed:@"test-image.jpg"];
    id<SDImageCoder> coder = [SDImageCodersManager sharedManager];
    NSData *encodedData = [coder encodedDataWithImage:image format:SDImageFormatAVIF options:nil];

编码完成后,将数据保存为本地文件,即可获得AVIF格式的图片文件。

Android 平台接入

依赖引入

引入我们提供的编解码AAR文件avifandroidjni-release.aar

图片编码调用

使用AvifDecoder类中的encodeRGBA8888方法可实现AVIF编码。参数说明如下:

/**
 * Encode the rgba data into AVIF image.
 * @param rgbaData RGBA8888 格式的 ByteBuffer
 * @param length buffer 长度
 * @param width 图片宽度
 * @param height 图片高度
 * @return 编码后的 byte 数组
 */
public static native byte[] encodeRGBA8888(ByteBuffer rgbaData, int length, int width, int height);

编码调用示例代码如下,其中avifBytes为编码后的字节数组:

val pixelBuffer = ByteBuffer.allocateDirect(bitmap.width * bitmap.height * 4)
bitmap.copyPixelsToBuffer(pixelBuffer)
val avifBytes = AvifDecoder.encodeRGBA8888(
    pixelBuffer,
    bitmap.width * bitmap.height * 4,
    bitmap.width,
    bitmap.height
)

后续步骤

如您还需要进行解码操作,请参考Android接入HEICAVIF解码说明iOS接入HEICAVIF解码说明中的AVIF部分。