01
배경
|
|
|
|
|
|---|---|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
2. 사진의 주요 사용 시나리오
|
|
|
|
|
|---|---|---|---|
표지 사진 |
|
운영 차트 |
|
|
|||
자원 지도 |
|
소재 그림 |
|
|
|||
아바타 사진 |
|
UGC |
|
3. 사진 형식의 진화
-
2020년 3분기 이전: iQiyi 앱은 주로 JPEG 형식 이미지를 사용합니다. -
2020년 3분기: iQiyi 앱은 WebP 형식 이미지 사용에 우선순위를 둘 것입니다 -
2022년 3분기: iQiyi 앱은 HEIC 형식 이미지 사용을 우선시합니다. -
2023년 3분기: iQiyi 앱은 AVIF 형식 이미지 사용을 우선시합니다.
4. 사진 생산과 소비 파노라마
이미지 형식 전환은 이미지의 접미사만 바꾸면 되는 간단한 문제인 것 같지만, iQiyi 앱의 이미지가 제작부터 변경되었기 때문에 모든 대용량 iQiyi 앱 콘텐츠 이미지를 새로운 형식으로 변경하는 것은 매우 복잡한 과정입니다. , 업로드, 생산, 배포부터 최종 디스플레이까지 전체 생산 및 소비 과정에는 여러 가지 전략이 있으며 전체 링크가 매우 길고 거의 모든 링크가 변환에 참여해야 합니다.
1) 제작 프로세스: AI 합성, 비디오 프레임 추출, 운영/제작 제공, 오프사이트 캡처 및 기타 이미지 소스를 포함하며 다양한 형식으로 제공됩니다.
2) 업로드 링크: 다양한 제작자가 다양한 백엔드 시스템을 통해 업로드하며 변환 범위가 넓습니다.
3) 제작 과정: 업로드된 이미지는 일반적으로 목적에 따라 다양한 전략을 사용하여 전처리되어야 합니다. 예를 들어, 비디오 커버 이미지의 경우 백엔드 시스템은 전용 매개변수를 사용하여 형식 제작, 비율 조정, 지능형 자르기, 확대/축소 등과 같은 일련의 사전 제작 작업을 수행하여 다양한 형식의 비디오 이미지를 사전 제작합니다. 이미지 형식 및 크기 정보는 미디어 라이브러리 엔터티에 기록되어 다양한 시나리오에서 사용할 수 있도록 각 끝에 제공됩니다. 예를 들어 APP의 로고와 같은 자료 이미지가 업로드됩니다. 콘텐츠 관리 시스템을 통해 트랜스코딩되어 지정된 형식으로만 생성되며 다양한 크기로 제작되지 않습니다.
4) 배포 링크: CDN 및 APP 비즈니스 백엔드 인터페이스가 배포를 담당합니다.
CDN은 이미지 형식 및 크기의 주문형 제작을 지원해야 합니다.
표지 이미지의 비표준 크기 666*666을 사용하는 AVIF 이미지 등 백엔드 시스템의 사전 제작 범위에 속하지 않는 크기의 경우 크기 및 형식 접미사 666_666을 지정하여 주문형으로 실시간 제작할 수 있습니다. avid.
-
APP 비즈니스 백엔드 인터페이스는 프런트엔드의 특성에 따라 지정된 형식과 크기의 이미지 URL을 반환해야 합니다. 다양한 비즈니스 시나리오의 경우 다양한 크기의 표지 이미지가 반환됩니다. 예를 들어 폭포 흐름은 579*772를 사용하고 영화 및 드라마 채널의 편집자는 405*540을 사용하며 S 카드 검색은 1248*624를 사용합니다.
02
WebP 형식 구현 실습
1. 배경
2020년 3월, iQiyi 모바일 단말기는 이미지 CDN 비용 절감을 위해 당시 주로 사용하던 JPG, PNG, GIF 형식을 대체하기 위해 WebP 이미지 형식을 전면 적용할 준비를 하고 있습니다.
2. 어려움
모바일 페이지에서 사용되는 이미지 URL은 기본적으로 모바일 백엔드 인터페이스에서 반환되는데, 모바일 백엔드 인터페이스에는 서비스가 너무 많습니다. 이러한 인터페이스를 WebP 형식으로 이미지 URL을 반환하도록 수정하는 데 드는 비용이 너무 높으며, 미래에는 다른 이미지 형식을 다시 변환해야 하는데 이는 매우 시간이 많이 걸리고 노동 집약적입니다.
3. 솔루션
네트워크 전체 적응형 영상 아키텍처(줄여서 caplist 솔루션)
원리: 모바일 이미지 라이브러리는 이미지 URL 뒤에 caplist 매개변수를 자동으로 입력하여 현재 장치에서 지원하는 이미지 형식을 이미지 CDN에 알려주고, 이미지 CDN은 최상의 이미지 형식을 반환합니다.
-
예를 들어 이미지의 원래 URL은 http://...xxx.jpg이고 이미지 라이브러리에서 발행한 이미지 요청은 이를 http://...xxx.jpg?caplist=webp,jpg로 변환합니다. CDN 측은 이미지 요청을 수신하고, 매개변수 caplist를 구문 분석하고, caplist가 지원하는 이미지 형식 범위 내에서 미리 정의된 우선순위(avif > heic > webp > jpg > png)를 기반으로 이미지를 다음과 같은 형식으로 반환하려고 시도합니다. 더 높은 우선순위. 프로세스는 먼저 캐시를 확인한 다음 주문형 생산을 지원하는지 확인하는 것입니다. 만족하지 않으면 다운그레이드됩니다. 구체적인 논리는 아래 그림과 같습니다. 모든 시도가 실패하면 404(HTTP_NOT_FOUND) 오류 코드가 응답되고 이미지 라이브러리는 지정된 이미지를 렌더링할 수 없습니다. -
제한 사항: 이미지 요청에 필요한 시간을 늘리는 다운그레이드를 피하십시오. 따라서 caplist 솔루션에 적합한 고화질 이미지 형식은 두 가지 특성을 가져야 합니다(WebP 형식은 이를 준수합니다). -
높은 사전 제작 비율(첫 번째 캐시 쿼리 적중률 증가) -
주문형 생산은 시간이 많이 걸리고 낮습니다(다운그레이드 방지 및 요청 시간 소모 감소).
4. 온라인 효과
03
HEIC 형식 구현 실습
1. 배경
iQiyi는 2020년 5월 초에 WebP 이미지 형식을 처음으로 완전히 사용했을 때 이미 모바일 단말기에서 더 높은 파일 압축률을 구현하는 HEIC 이미지 형식의 가능성을 조사했습니다.
모델은 호환성이 좋습니다. iOS11+ 및 Android9+는 시스템 수준에서 HEIC 형식 이미지를 지원하며 호환성에는 문제가 없습니다.
높은 파일 압축률: 동일한 이미지 품질로 HEIC 이미지는 WebP 이미지보다 30% 이상 작습니다.
디코딩 성능: iOS 측의 하드 디코딩은 WebP보다 빠르고 성능도 좋습니다. 그러나 Android 측에서는 소프트 디코딩만 지원하므로 WebP보다 7.75배 더 오래 걸리고 WebP보다 3.76배 더 많은 메모리 공간을 차지합니다.
Android 시스템에서 HEIC 이미지 형식의 디코딩 성능이 좋지 않기 때문에 HEIC 이미지 형식은 iOS 측의 특정 시나리오에서 소규모로만 시험되었습니다.
2년 후인 2022년 5월, 비용 절감과 효율성 향상을 배경으로 여러 부서가 협력하여 HEIC 이미지 형식 구현을 추진하고, 다양한 최적화 방법을 통해 HEIC 이미지 형식 방문 비율을 높였습니다.
2. 어려움
-
Android 시스템은 HEIC 형식을 지원하지만 디코딩 성능이 낮고 오픈 소스 HEIC 디코더의 성능이 이상적이지 않으며 전체 구현이 요구 사항을 충족할 수 없습니다. -
HEIC图片格式编码性能较差，耗时较长，不能满足CDN按需生产的要求。之前落地WebP格式过程中非常高效成功的caplist方案非常依赖按需生产能力。如果请求的图片没有预生产过HEIC格式，也不支持按需生产，就会直接降级到低优先级的格式，这会导致图片请求耗时增加。因此，caplist方案在HEIC格式落地中不适用，这大大提高了HEIC格式落地的难度和时间成本。 -
已生产的HEIC图片仅覆盖2020年之后生产的部分图片，占比不够高 -
动图流量占比大，但是iOS和Android系统都不支持HEIC动图
3、解决方案
1）自研HEIC解码器，解决Android端HEIC图片解码性能问题
HEIC图片格式是使用H265编码格式压缩的，而爱奇艺在H265视频编解码方面有丰富经验，于是决定自研HEIC图片解码方案。经过不懈努力，自研解码器的性能相对于系统解码器提升了5倍以上。解码性能虽然仍然比WebP差一点，但是考虑到CDN成本节省，图片下载耗时降低等优势，已具备上线要求。
2）通过后端接口直接返回HEIC格式图片URL的方式落地HEIC格式，解决项目前期caplist方案不能用的问题 由于HEIC格式编码耗时长，不满足caplist方案需要图片格式支持按需生产的前提，那就只能是用最简单直白的方法了，即通过移动后端接口直接返回有预生产好的HEIC格式的图片URL，来让移动前端加载HEIC格式的图片。
但是由于移动后端接口需要聚合的各个业务后端接口非常多，非常分散，而且某个图片是否有预生产好HEIC格式这个信息业务后端接口可能没有传递给移动后端接口，给移动后端接口改造也带来了难度。我们只能通过线上热度数据分析排出要改造的接口的优先级，联合多个业务后端团队有选择地挑选一些影响较大的接口，优先进行改造，以控制改造成本。
3）解决HEIC编码器性能问题，部分使用caplist方案解决项目后期HEIC格式访问量占比增长乏力的问题
Android端自研HEIC解码器的成功研发和落地也为HEIC编码性能较差问题提供了解决思路。技术团队又自研出了高性能HEIC编码方案——Q265编码器，其HEIC编码耗时接近于WebP，比老的X265编码器缩短70%，性能已满足实时生产的需求。这使得caplist方案又能够被采用了。不过，Q265编码器经过几次上线后的迭代改进，中间版本生产出来的HEIC图片有一些问题需要避免使用，因此，caplist覆盖范围必须设置为最终稳定版上线日期之后生产的HEIC图片。加上使用Q265编码器的图片生产工具没有被部署到所有图片CDN服务器，所以，针对HEIC格式的caplist方案是受限制的。
4）针对热度较高的历史图片进行补生产，进一步提升HEIC格式访问量占比
分析发现2020年之前生产的老图片仍然有较高的访问量，但是又没有预生产HEIC格式的图片，并且分布极为分散，难以通过移动后端接口改造的方式来返回HEIC格式给前端，也无法用caplist方案覆盖，因为caplist只能覆盖Q265编码器上线后生产的图片。
最终，我们通过统计线上图片的访问热度，对访问量较高的历史图片补生产了HEIC格式。
5）双端自研动图编解码渲染方案，提高降CDN成本的收益
分析发现移动端有20%-30%的图片流量来自动图，HEIC动图可以像视频编码压缩算法一样支持前后帧合成，文件压缩率比静图更高，但是当时没有现成的HEIC动图的生产端编码和移动端解码方案，需要全新自研。
-
生产端编码方案：自研HEIC动图编码器 使用H265格式编码，使用自研库进行格式封装，配置和调校参数以达到最优效果。实验了全I帧、IP帧、PB帧等多个方案，最终选择了自研IP帧方案，兼顾了兼容性和文件大小。 -
Android端解码方案：自研HEIC动图解码器 
-
iOS端解码方案：自研HEIC动图解码器
4、上线效果
截止2023年3月8日，移动端HEIC格式图片相对于所有图片格式的访问量占比40%+，相比WebP节省流量13%+。HEIC图片格式之所以没能达到WebP格式当时85%的访问量占比，原因如下：
通过移动后端接口改造的手段返回HEIC格式图片给移动前端成本较高，仅覆盖了少数访问量高的业务场景；
通过caplist方案将非HEIC格式图片让CDN优先返回HEIC格式的手段，因Q265编码器上线时间不长，图片CDN服务器未全面部署等原因，仅覆盖了某个日期之后生产的某些图片CDN域名下的图片，范围较小；
补生产的历史图片数量有限，全量补生产代价较大。
04
AVIF格式落地实践
1、背景
比HEIC更新、更先进的图片格式是AVIF（AV1 Image File Format，是由开放媒体联盟开发，采用AV1视讯编码技术压缩图像的一种图像档案格式），其具有更高的图片压缩率，如果能推广落地，又能进一步降低图片CDN成本。经调研，iOS16+，Android12+系统层面对AVIF格式图片进行了支持。
由于在HEIC格式落地的过程中积累了很多成功经验，技术团队对支持更先进的AVIF图片格式信心满满。于是在2023年5月，我们又启动了AVIF图片格式落地专项，基本可以照搬HEIC格式落地的模式。
2、难点
系统解码性能不佳
由于iOS和Android系统解码层面依然存在解码性能差的问题，并且对于系统版本要求过高（Android 12+、iOS 16+），符合要求的线上设备数量占比不够高，导致无法直接使用系统解码作为上线方案。
不支持透明图
由于爱奇艺自研的QAV1编码器之前一直应用于视频编码，对于透明内容没有硬性要求，因此AVIF编解码器刚开始不支持透明内容。而在图片的使用过程中，透明图是比较常见的场景。
-
图片覆盖范围不广 在AVIF全面上线后，根据CDN团队的反馈，caplist方案仅能覆盖有AVIF预生产且支持按需生产的部分图片CDN域名下的部分目录，AVIF格式访问量整体占比依然偏低。通过数据分析发现访问量占比较大的一些目录还未支持AVIF格式图片预生产。另一方面，目前AVIF按需生产的支持范围依然不是很广。这两方面导致caplist方案覆盖范围非常受限。
3、解决方案
-
自研avif解码器，解决移动端AVIF解码性能不佳的问题 得益于爱奇艺QAV1视频编解码器已经广泛使用，可以将成果复用于图片的编解码方案。最终编解码团队自研的AVIF解码器支持iOS9+，Android7+以上的系统版本，并且解码性能优于libheif、libaom、libdav1等开源解码器。 -
改进自研的avif编解码器，解决透明图问题 经过编解码团队的不懈努力，在2023Q4对AVIF透明图的编解码进行了支持。 -
用caplist方案覆盖更多图片CDN目录，提高AVIF格式占比 后台系统在2023Q4对相关目录进行了预生产支持，使得这些目录下预生产日期之后生产的图片可以被caplist方案覆盖到。但是整体覆盖的目录下的图片访问占比仍然偏低。 CDN团队正在研发全按需方案：所有图片CDN域名，所有目录都支持按需生产，且不需要使用caplist参数，通过文件名后缀指定图片格式。届时可以解决不同域名和路径对AVIF的支持。
4、上线效果
通过分析线上数据，观察到图片文件体积优化效果：
静图：HEIC比WebP小30%，AVIF比HEIC小11%，AVIF比WebP小38%；
动图：HEIC比WebP小60%，AVIF比HEIC小30%，AVIF比WebP小72%。
05
总结与展望
通过图片生产消费全流程跨部门通力合作，核心技术攻关，HEIC/AVIF编解码完整方案全自研等实践，爱奇艺逐步将主要图片格式从JPG迁移到最新的AVIF，在保证图片显示质量的前提下，有效地降低了图片CDN带宽成本。
未来，爱奇艺将继续努力提高AVIF图片格式的使用率，实现极致的图片CDN成本控制。
本文分享自微信公众号 - 爱奇艺技术产品团队（iQIYI-TP）。
如有侵权，请联系 [email protected] 删除。
本文参与“OSC源创计划”，欢迎正在阅读的你也加入，一起分享。
{{o.name}}
{{m.name}}