手淘图片库新特性解析云移淘系技术随着手淘拉新和用户体量的

云移淘系技术
文章插图
随着手淘拉新和用户体量的增加， CDN图片资源的访问量也随之增加。我们知道访问量增加，会带来带宽的增加，服务器成本也随之增加。同时新增的用户，喜好各不相同，为了满足不同用户的喜好，商家会修改主图样式来吸引消费者。如何缓解用户增长带来的带宽压力和满足商家和用户的多样化需求呢？针对这两个问题，图片库和图片空间同学对客户端和服务端做了相应的改造来解决这些问题，主要的做法是H5HEIC化以及图片库磁盘缓存标准化。
HEIC的应用
? HEIC是什么
HEIF是一种图像容器格式，它所生成的图像文件相对较小，且图像质量也高于较早的JPEG标准。 HEIF这种新的图像格式基于高效视频压缩格式（也称为HEVC或H.265），它通过使用更先进的压缩算法来实现图片的压缩存储。

感兴趣的同学可以看下
H.265一般是用在视频上的一种编码标准，这个标准会有不同的实现。
引用

手淘NativeHEIC化
从2018年开始手淘的native页面已经全面支持HEIC,为CDN侧节省了大量流量，优化了用户的图片体验。 native页面可以HEIC化需要满足两个条件：

业务的图片是存放在手淘图片空间，才能够使用图片空间的图片处理能力。
业务需要使用图片库的适配库来对原始url进行适配，然后再借助图片库的能力完成图片的加载。

目前从统计来看淘内的图片40%已经使用了HEIC ，为什么只有40%的量？一方面是因为手淘部分业务的图片不是放在图片空间做处理，比如有的业务使用TFS来做存储，另一方面是手淘使用的H5内核目前无法解码HEIC图片。说到这里需要简单介绍下手淘的图片的业务流程：

文章插图
【手淘图片库新特性解析】以上只是简单的示意，大体展现图片如何从商家流动到用户的，主要的中转便是图片空间它可以对图片进行处理和转化。用户使用手淘客户端访问页面时，业务会将商品图片url传递给图片库，图片库会对传入的url做处理，按照图片空间的规则拼接上HEIC后缀，这样当url到达CDN时，如果有HEIC图片缓存直接返回，如果没有会请求图片空间的服务将原始图片转码成heic图片。以上是native的流程，我们还忽略了另一个流量来源H5 ，目前手淘H5容器无法使用HEIC解码器，所以没有进行HEIC化。
H5页面HEIC化
为什么今年可以做H5页面HEIC化了呢？主要是以下两个方面：

内核提供了外接三方解码器的能力
手淘支持远程下载so

有同学可能会好奇，之前提到的图片空间是什么？图片空间可以看作是提供强大图片处理能力的服务。从上一小节的流程图可以看出CDN后面是图片空间，这里简单介绍下图片空间和CDN之间的关系。当有图片请求访问到CDN时， CDN会查找当前缓存中有没有这个请求需要的图片，如果有直接从CDN中返回，如果没有CDN会去请求图片空间处理原图给出符合要求的图片，然后再返回给CDN ，同时CDN会对这张图片做缓存，当下次有相同的请求过来时就直接返回缓存的图片，不再回源到图片空间，缩短请求响应时间。
首先介绍下UC内核外接三方解码器能力，这个能力是如何实现的呢？简单来说就是提供实现UC规定接口的so文件(保证规定的函数符号会被正确导出) ， UC内核会使用dlopen打开so ，同时获取接口函数的函数指针，当需要解码时直接使用函数指针直接调用即可。下面是大体的调用流程以及相关的接口定义：
简短介绍下上图蓝框的流程：