| Introduction AVIF is a new-generation image format based on AV1 video coding, with high compression rate and good picture details. Mobile APPs are often faced with scenarios where the network environment is unstable and users need to save traffic, so use AVIF images. However, AVIF is currently only natively supported on iOS16 and Android12, and many models cannot cover it. What should I do? This article will teach you to integrate an AVIF decoder in one minute, compatible with all models.
Introduction to AVIF
AVIF is a new image format based on AV1 video encoding. Compared with image formats such as JPEG and WEBP, it has a higher compression rate and better picture details. The most important thing is that AV1 is promoted by AOM (Alliance for Open Media) initiated by Google, and continues to evolve on the basis of VP9. There is no patent licensing fee (and Tencent is also a founding member of AOM). For more AVIF introduction, you can Search by yourself, so I won't go into details here.
APP display AVIF picture
Since AVIF is currently only natively supported on iOS16 and Android12, native support alone is definitely not enough to cover all mainstream models. Therefore, it is necessary to integrate an AVIF decoder to decode by itself during client development.
Industry open source codec library: https://github.com/AOMediaCodec/libavif
Tencent self-developed codec library: the data in this article is based on the codec library of Vientiane AVIF SDK
To directly use the above decoding library, you need to compile the Android and iOS decoder products yourself, and write some JNI codes. If your app uses image libraries such as Glide and SDWebImage, you need to package and integrate them according to the requirements of the image library. This involves a lot of work. This article is called "Make the APP support AVIF images in one minute". Obviously, there is a faster way, that is, to access the data Vientiane AVIF SDK. We have already done the above things for you.
Data Vientiane AVIF Image SDK
1. Android One Minute Integration
Using the Glide image gallery
1. Install Glide and AVIF SDK
implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.github.bumptech.glide:glide:version'annotationProcessor 'com.github.bumptech.glide:compiler:version' 2. Register the decoder GlideModule
// 注册自定义 GlideModule // 开发者应该创建此类注册相关解码器<br> // 类库开发者可以继承 LibraryGlideModule 创建类似的注册类@GlideModulepublic class MyAppGlideModule extends AppGlideModule { @Override public void registerComponents(@NonNull Context context, @NonNull Glide glide, Registry registry) { /*------------------解码器 开始-------------------------*/ //注册 AVIF 静态图片解码器 registry.prepend(Registry.BUCKET_BITMAP, InputStream.class, Bitmap.class, new StreamAvifDecoder(glide.getBitmapPool(), glide.getArrayPool())); registry.prepend(Registry.BUCKET_BITMAP, ByteBuffer.class, Bitmap.class, new ByteBufferAvifDecoder(glide.getBitmapPool())); //注册 AVIF 动图解码器 registry.prepend(InputStream.class, AvifSequenceDrawable.class, new StreamAvifSequenceDecoder(glide.getBitmapPool(), glide.getArrayPool())); registry.prepend(ByteBuffer.class, AvifSequenceDrawable.class, new ByteBufferAvifSequenceDecoder(glide.getBitmapPool())); /*------------------解码器 结束-------------------------*/ }}3. Use Glide to load images
Just load the picture like a normal jpg or png picture, please refer to the official document of Glide
Glide.with(context).load(url).into(imageView);Using the Fresco image library
1. Install Fresco and AVIF SDK
implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.facebook.fresco:fresco:version'// 如果需要支持 avif 动图解码器 则需要加上 fresco:animated-base 依赖implementation 'com.facebook.fresco:animated-base:version'2. Configure the decoder
// 解码器配置ImageDecoderConfig imageDecoderConfig = new ImageDecoderConfig.Builder() // 配置 AVIF 静态解码器 .addDecodingCapability( AvifFormatChecker.AVIF, new AvifFormatChecker(), new FrescoAvifDecoder()) // 配置 AVIF 动图解码器 .addDecodingCapability( AvisFormatChecker.AVIS, new AvisFormatChecker(), new FrescoAvisDecoder()) .build();// 配置 Image PipelineImagePipelineConfig config = ImagePipelineConfig.newBuilder(context) .setImageDecoderConfig(imageDecoderConfig) .build();// 初始化 FrescoFresco.initialize(context, config);3. Use Fresco to load images
Just load the image like a normal jpg or png image, please refer to the official documentation of Fresco.
<com.facebook.drawee.view.SimpleDraweeView android:id="@+id/my_image_view" android:layout_width="130dp" android:layout_height="130dp" fresco:placeholderImage="@drawable/my_drawable" />Uri uri = Uri.parse("https://xxx.com/test.avif");SimpleDraweeView draweeView = (SimpleDraweeView) findViewById(R.id.my_image_view);draweeView.setImageURI(uri);2. iOS one-minute integration
1. Install SDWebImage and AVIF SDK
Add the module to your project Podfile:
pod 'CloudInfinite/SDWebImage-CloudInfinite'pod 'CloudInfinite/AVIF'Execute the installation command in the terminal:
pod install2. Use SDWebImage to directly load AVIF images
The SDWebImage-CloudInfinite module has automatically added the AVIF decoder to the SDWebImage decoder queue when the APP starts, and automatically finds the AVIF decoder to decode the picture when the decoder is loaded. Animations are supported without additional operations. There is no difference when using SDWebImage.
Objective-C
[imageView sd_setImageWithURL:[NSURL URLWithString:@"AVIF 图片链接"]];swift
UIImageView() .sd_setImage(with: NSURL.init(string: "AVIF 图片链接"))Data Vientiane AVIF SDK other functions
1. Basic decoder
It is used to directly decode AVIF data into bitmap, UIImage, and determine whether the image data is in AVIF format
Android
import com.tencent.qcloud.image.avif.Avif;// 图片的字节数组byte[] buffer = new byte[XXX];// 是否是 AVIF 格式boolean isAvif = Avif.isAvif(buffer);// 是否是 AVIF 动图 boolean isAvis = Avif.isAvis(buffer);// 原图解码Bitmap bitmap = Avif.decode(buffer);// 宽度等比解码// 目标宽度int dstWidth = 500; Bitmap bitmap = Avif.decode(buffer, dstWidth);// 区域缩放解码// 区域左上角x坐标int x = 0;// 区域左上角y坐标int y = 0;// 区域宽度int width = 100;// 区域高度int height = 100;// 缩放比, 大于1的时候才生效，小于等于1的情况下不作缩放int inSampleSize = 2;Bitmap bitmap = Avif.decode(buffer, x, y, width, height, inSampleSize);iOS
#import "AVIFDecoderHelper.h"#import "UIImage+AVIFDecode.h"//判断是否是 AVIF 格式以及动图格式// data为图片NSData类型数据BOOL isAVIF = [AVIFDecoderHelper isAVIFImage:data];//解码 AVIF 图片// data为图片NSData类型数据UIImage * image = [UIImage AVIFImageWithContentsOfData:data];/ data为图片NSData类型数据// 缩小两倍 并指定解码的范围( rect 以原图为基准)UIImage * image = [UIImage AVIFImageWithContentsOfData:imageData scale:2 rect:CGRectMake(x, y, width, height)];2. Android Super Large Image Sampling Image Library
1. Install subsampling-scale-image-view and AVIF SDK
implementation 'com.qcloud.cos:avif:1.1.0' implementation 'com.davemorrissey.labs:subsampling-scale-image-view:3.10.0'// AndroidX请使用// implementation 'com.davemorrissey.labs:subsampling-scale-image-view-androidx:3.10.0'2. Get the SubsamplingScaleImageView control and register the decoder
SubsamplingScaleImageView subsamplingScaleImageView = findViewById(R.id.subsampling_scale_image_view);// 设置AVIF图片解码器subsamplingScaleImageView.setBitmapDecoderClass(AvifSubsamplingImageDecoder.class);subsamplingScaleImageView.setRegionDecoderClass(AvifSubsamplingImageRegionDecoder.class);3. Use subsampling-scale-image-view to load images
Just load the image like a normal jpg or png image, please refer to the subsampling-scale-image-view official document.
// 加载 uri 图片subsamplingScaleImageView.setImage(ImageSource.uri(uri));// 加载 assets 图片subsamplingScaleImageView.setImage(ImageSource.asset("test.avif"));// 加载 resource 图片subsamplingScaleImageView.setImage(ImageSource.resource(R.raw.avif));Summarize
In a word, the Data Vientiane AVIF SDK helps you encapsulate the AVIF decoder, and also encapsulates the commonly used image library ecology of Android and iOS, so that you can display AVIF images in the APP within one minute.