如何让Fresco支持HEIF/HEIC图片格式

一、阅前准备

HEIF图片格式是什么？

高效率图像格式（High Efficiency Image Format ，HEIF）最早被苹果公司的 iPhone 所使用，并且也将用于 Google 的 Android P 手机系统。微软也于最新放出的 Windows 10 Build 17123 预览版开始，新增了对 HEIF 图像格式的系统原生支持，所以系统极客将在本文中为大家简介 HEIF 这一新兴的高效率图像格式。

HEIF优于JPEG图像格式

高效率图像格式在各方面均优于 JPEG，通过使用更现代的压缩算法，它可以将相同数量的数据大小压缩到 JPEG 图像文件的 50% 左右。随着手机 Camera 的不断升级，照片的细节也日益增加。通过将照片存储为 HEIF 格式而不非 JPEG，可以让文件大小减半，几乎可以在同一部手机上存储以前 2 倍的照片数量。如果一些云服务也支持 HEIF 文件，则上传到在线服务的速度也会更快，并且使用更少的存储空间。在 iPhone 上，这意味着您的照片应该会以以前两倍的速度上传到 iCloud 照片库。

JPEG 标准可以追溯到 1992 年，JPEG 标准的最新版本也于 1994 年完成，JPEG 长期以来为我们提供了很好的服务，但现代（新）标准超越它并不是很奇怪。

HEIC唯一缺点：兼容性

目前使用 HEIF 或 HEIC 照片唯一的缺点就是兼容性问题。现在的软件只要能够查看图片，那它肯定就可以读取 JPEG 图像，但如果你拍摄了以 HEIF 或 HEIC 扩展名结尾的图片，并不是在所有地方和软件中都可以正确识别。

这也是当我们将照片附加到电子邮件或在不支持 HEIF 文件的服务中进行共享时， iPhone 和 iPad 会自动将其转换为 JPEG 图像的原因。在使用 iTunes 将 HEIF 照片导入 Windows PC 时，也会自动将它们转换为 JPEG 格式。

虽然 Mac 从 macOS High Sierra 开始支持 .HEIF 和 .HEIC 文件，但 Windows 10 从 Windows 10 Build 17123 预览版才开始提供 HEIF 图像内置支持，所以对于老旧 Windows、macOS 和旧版 iOS 与 Android 用户需要使用第三方图像查看器或转换软件才能查看 .HEIF 或 .HEIC 文件。

那我们如何让HEIF 支持全端Android 机型呢? 这里提供了一种软解码实现方案，具体接入如下：

二、遇到了什么问题

HEIF 图片在iOS 11以上开始支持，但是在Android 系统支持一直比较慢，而且有很多系统性的bug 会导致解码失败；所以我们干脆实现一种软解的方案；
HEIF 使用自研的解码能力，发现使用HEIF 图片加载整体体积降低 50%+，用户加载更快！
针对线上图片性能、图片进行可用性、网络耗时的监控，全面感知客户端的图片加载问题；

三、开发环境

推荐开发者使用 Android Studio 作为自己的开发工具，本开发文档也是基于 Android Studio开发环境下进行编写的。

四、集成方式

项目 build.gradle 下加上

maven {url 'https://artifact.bytedance.com/repository/Volcengine/'
}

app module build.gradle下加上

国内版本：版本发布历史
或者到这里可以找到最新版本：https://artifact.bytedance.com/repository/Volcengine/com/bytedance/fresco/fresco/

implementation 'com.bytedance.fresco:fresco:x.x.x-tob'
implementation "com.bytedance.fresco:animated-gif:x.x.x-tob"  //gif
implementation "com.bytedance.fresco:animated-webp:x.x.x-tob" //webp animated
implementation "com.bytedance.fresco:webpsupport:x.x.x-tob"   //低版本webp支持
implementation "com.bytedance.fresco:drawee:x.x.x-tob"        //fresco组件
implementation "com.bytedance.fresco:statistics:x.x.x-tob"    //监控+网络组件
implementation "com.bytedance.fresco:heif:x.x.x-tob"          //heif静图
implementation "com.bytedance.fresco:animated-heif:x.x.x-tob" //heif动图

海外版本：具体版本号请点击查看版本发布历史

implementation 'com.bytedance.fresco:fresco:x.x.x-tob-global'
implementation "com.bytedance.fresco:animated-gif:x.x.x-tob-global"  //gif
implementation "com.bytedance.fresco:animated-webp:x.x.x-tob-global" //webp animated
implementation "com.bytedance.fresco:webpsupport:x.x.x-tob-global"   //低版本webp支持
implementation "com.bytedance.fresco:drawee:x.x.x-tob-global"        //fresco组件
implementation "com.bytedance.fresco:statistics:x.x.x-tob-global"    //监控+网络组件
implementation "com.bytedance.fresco:heif:x.x.x-tob-global"          //heif静图
implementation "com.bytedance.fresco:animated-heif:x.x.x-tob-global" //heif动图

五、接入说明

1. 初始化

SDK在集成之前需要将此AppID传入参数里（需要注意的是AppID在Android端SDK中也简写为“aid”），部分参数含义详解如下：

AppID（aid）：SDK用于打点监控上报的最小单元，通过此将数据进行隔离上报，同时通过AppID可以拉取对应的云控配置比如客户端采样率、网络优化参数等。
deviceId：设备的唯一编号，用于统计区分使用。
versionName，versionCode：主要用于数据统计与配置拉取。
channel：渠道标识，用于区分统计不同渠道来源的图片服务质量数据。比如可传入huawei、oppo等不同渠道标识，便于统计区分。
appName：App的名称，用于统计使用。

   @Override
public void onCreate() {super.onCreate();initApplog(); // 初始化ApploginitFresco(); // 初始化Fresco
}private void initApplog() {/* 初始化开始 */final com.bytedance.applog.InitConfig config = new com.bytedance.applog.InitConfig("your_appid", "your_channel"); // appid和渠道，appid如不清楚请提交工单咨询，注意第二个参数 channel 不能为空config.setUriConfig (UriConstants.DEFAULT);//国内上报地址，国外则有SINGAPORE,AMERICA,SINGAPORE_ALI,REGION_DEFAULT(=SINGAPORE)// 是否在控制台输出日志，可用于观察用户行为日志上报情况，上线之前可去掉config.setLogger(new ILogger() {@Overridepublic void log(String s, Throwable throwable) {Log.d("AppLog------->: ",""+s);}});config.setH5CollectEnable (false);//关闭内嵌H5页面的无埋点事件// 加密开关，SDK 5.5.1 及以上版本支持，false 为关闭加密，上线时建议设置为 trueAppLog.setEncryptAndCompress(true);config.setAutoStart(true);AppLog.init(this, config);/* 初始化结束 */
}private void initFresco() {String aid = "xxx";                // App IDString deviceId = "xxx";           // 设备 IDString versionName = "0.0.1";      // App 版本号，业务方填写String versionCode = "1";          // App 版本code，业务方填写String channel = "debug";          // 渠道String appName = "Sample";         // App 名称，业务方app名com.optimize.statistics.InitConfig initConfig = new com.optimize.statistics.InitConfig(this,aid,appName,channel,versionName,versionCode,deviceId,InitConfig.CHINA   //海外版本选择 US_EAST);// 注意须保持以下初始化顺序！// 初始化TTNetFrescoTTNetFetcher frescoTTNetFetcher = new FrescoTTNetFetcher(initConfig);//初始化云控CloudControl.init(initConfig);// 统计功能Set<RequestListener> listeners = new HashSet<>();listeners.add(new FrescoTraceListener(initConfig));// HEIF功能配置PoolFactory factory = new PoolFactory(PoolConfig.newBuilder().build());ImagePipelineConfig.Builder builder = ImagePipelineConfig.newBuilder(this).setNetworkFetcher(frescoTTNetFetcher).setRequestListeners(listeners).setImageDecoderConfig(ImageDecoderConfig.newBuilder().addDecodingCapability(HeifDecoder.HEIF_FORMAT,new HeifDecoder.HeifFormatChecker(),new HeifDecoder.HeifFormatDecoder(factory.getPooledByteBufferFactory())).build());Fresco.initialize(this, builder.build());
}

注： InitConfig构造参数均不能为null

    InitConfig(@NonNull Application context, @NonNull String aid, @NonNull String appName, @NonNull String channel, @NonNull String versionName, @NonNull String versionCode, @NonNull String deviceId, int uriConfig)

如果图片库打点监控的信息上传成功，会有类似以下日志输出：

2021-06-16 21:48:44.516 8711-8988/com.dwz.DwzMobileApp D/AppLog------->:: setResult, [{pack, u1, 1, , 1623851324390}], []
2021-06-16 21:48:44.520 8711-8988/com.dwz.DwzMobileApp D/AppLog------->:: sender 1 1

2. 使用方式

使用方式和正常的Fresco一样，Fresco的 api 并没有修改，参考：https://www.fresco-cn.org/

3. 单独使用监控功能的方式

如果不想使用改造后的Fresco，使用Facebook源的Fresco，可以只使用提供的统计功能，使用统计功能也需要初始化Applog。（具体版本号请点击查看版本发布历史）

// 国内版本
implementation "com.bytedance.fresco:statistics:x.x.x-tob"// 国外版本
implementation "com.bytedance.fresco:statistics:x.x.x-tob-global"

Set<RequestListener> listeners = new HashSet<>();
listeners.add(new FrescoTraceListener(initConfig));
ImagePipelineConfig.Builder builder = ImagePipelineConfig.newBuilder(this).setNetworkFetcher(new TTFrescoOkHttpFetcher()).setRequestListeners(listeners)
Fresco.initialize(this, builder.build());

4. Feature使用

Android 9.0 libwebp解码

Android 9.0版本上，系统原生的Webp解码方式存在bug，这里推荐使用libwebp解码的方式。

ImagePipelineConfig.Builder builder = ImagePipelineConfig.newBuilder(this);
// 对9.0版本打开libwebp解码
builder.experiment().setPieDecoderEnabled(true);

备注：
在honor magic2上对同一图片进行benchmark测试，Android原生解码15.9ms，libwebp解码16.4ms，无明显性能差异

低内存策略

接入方式：
Fresco初始化之前配置以下代码

ImageDecodeBitmapConfigStrategy.setStrategy(ImageDecodeBitmapConfigStrategy.MEMORY_AT_LEAST);

OOM兜底

接入方式：

ImagePipelineConfig.Builder builder = ImagePipelineConfig.newBuilder(this)
builder.experiment().setOomOptEnabled(true);

Awebp动图渐进式

接入方式：

全局开启：

ImagePipelineConfig.getDefaultImageRequestConfig().setProgressiveRenderingAnimatedEnabled(true);

单个请求开启：

ImageRequestBuilder builder = ImageRequestBuilder.newBuilderWithSource(uri).setProgressiveRenderingAnimatedEnabled(true);
DraweeController controller = Fresco.newDraweeControllerBuilder().setAutoPlayAnimations(true).setImageRequest(builder.build()).setOldController(getController()).build();
setController(controller);

智能裁剪

接入方式：

ImageRequestBuilder builder = ImageRequestBuilder.newBuilderWithSource(uri).setImageDecodeOptions(new ImageDecodeOptionsBuilder().setUseSmartCrop(true).build());
DraweeController controller = Fresco.newDraweeControllerBuilder().setImageRequest(builder.build()).setOldController(getController()).build();
setController(controller);

使用此方法，看起来免费可用，有效，而且目前的方式实现中，这个解码库效率比开源实现效率高1-3倍解码速度；