腾小云导读
在互联网职业降本增效的大布景下，如何结合事务自身情况下降本钱是每个事务都需求考虑的问题。腾讯视频事务产品全渠道日均覆盖人数超2亿。图片作为流媒体之外最中心的传达介质，巨大的事务量让静态带宽本钱一直居高不下——腾讯视频各端日均图片下载次数超越 100 亿次，均匀图片巨细超 100kb，由此带来的图片静态带宽本钱月均超千万。本文将详细介绍腾讯视频事务产品凭借腾讯云数据万象来优化静态带宽本钱过程中的应战与解决计划，输出同范畴通用的经历办法，期望能够对广大开发爱好者有所启发。
看目录，点保藏
1 布景
2 图片处理重要概念
2.1图片紧缩
2.2图片格局
3 腾讯视频图片存储2大绝技
3.1 AVIF紧缩-悄然变”小“，紧缩率超50%
3.2 图片采样-最适宜的窗口，显现最适宜的图片
4 总结
01、 前言
在降本增效的互联网大布景下，如何结合自身事务情况下降本钱是许多事务都需求考虑的命题。
腾讯视频作为我国领先的在线视频媒体渠道，全渠道日均覆盖人数超 2 亿，付费会员数超越 1 亿。作为处于职业领先地位的产品，腾讯视频完结了对抢手剧集、电影、综艺、动漫、体育等各内容的全面覆盖。一同腾讯视频事务很杂乱、事务分布很广泛。除了移动端，还有 Web 端、PC 端、客厅和 H5 等多个产品形态。
在这众多形态之中，图片是除了流媒体之外最中心的传达媒介。 如此巨大杂乱的事务，势必会导致图片爆炸式的增加。据不彻底计算，腾讯视频各端日均图片下载次数超越 100 亿次，均匀图片巨细超 100kb，由此带来的图片静态带宽本钱月均超千万。如何在确保用户体会的前提下下降图片带宽本钱，便成为了团队的重点课题。
本文在科普图片处理的通识常识后，将详细介绍腾讯视频事务凭借腾讯云数据万象进行静态带宽本钱优化过程中的应战与解决计划，输出通用的经历办法。期望能够对诸位看官有所启发。
02、 图片处理重要概念
现有的图片格局有哪些？什么是有损紧缩、无损紧缩？在介绍计划之前，咱们有必要了解下相关的根底概念。
2.1 图片紧缩
- 无损紧缩
简介：
无损紧缩是对文件自身的紧缩，和其它数据文件的紧缩一样，是对文件的数据存储方法进行优化。选用某种算法表明重复的数据信息，文件能够彻底复原，不会影响文件内容。关于数码图画而言，也就不会使图画细节有任何丢失。
原理：
无损紧缩的根本原理是相同的颜色信息只需保存一次。紧缩图画的软件首先会确定图画中哪些区域是相同的，哪些是不同的。包含了重复数据的图画(如蓝天)就能够被紧缩，只要蓝天的起始点和终结点需求被记载下来。可是蓝色或许还会有不同的深浅，天空有时也或许被树木、山峰或其他的目标掩盖，这些就需求别的记载。
从本质上看，无损紧缩的办法能够删除一些重复数据，大大削减要在磁盘上保存的图画尺度。可是，无损紧缩的办法并不能削减图画的内存占用量，这是因为，当从磁盘上读取图画时，软件又会把丢失的像素用适当的颜色信息填充进来。如果要削减图画占用内存的容量，就有必要运用有损紧缩办法。
常用算法：
游程编码、熵编码法：如 LZW 这样的自适应字典算法。
-
有损紧缩
简介：
有损紧缩是对图画自身的改动，在保存图画时保留了较多的亮度信息，而将色相和色纯度的信息和周围的像素进行兼并。
兼并的份额不同，紧缩的份额也不同，由于信息量削减了，所以紧缩比能够很高，图画质量也会相应下降。
原理：
有损紧缩能够削减图画在内存和磁盘中占用的空间，在屏幕上观看图画时，不会发现它对图画的外观产生太大的不利影响。
因为人的眼睛对光线比较敏感，光线对景物的效果比颜色的效果更为重要，这便是有损紧缩技能的根本依据。
常用算法：
|
颜色空间：这是化减到图画中常用的颜色。所挑选的颜色界说在紧缩图画头的调色板中，图画中的每个像素都用调色板中颜色索引表明。这种办法能够与抖动一同运用以含糊颜色鸿沟。 色度抽样：这运用了人眼关于亮度改变的敏感性远大于颜色改变，这样就能够将图画中的颜色信息削减一半甚至更多。 改换编码：这是最常用的办法。首先运用如离散余弦改换（DCT）或许小波改换这样的傅立叶相关改换，然后进行量化和用熵编码法紧缩。 分形紧缩：是一种以碎形为根底的图画紧缩，适用于纹理及一些天然印象。 |
2.2 图片格局
| 格局 | 介绍 |
| JPEG |
JPEG 是用于接连色调静态图画紧缩的一种标准，文件后缀名为 .jpg 或 .jpeg，是最常用的图画文件格局。它选用联合编码方法，以去除冗余的图画和彩色数据，属于有损紧缩格局，能够将图画紧缩在很小的储存空间，但一定程度上会形成图画数据的损害。 JPEG 编码中 quality 越小，图片体积就越小，质量越也差，编码时刻也越短。 |
| PNG |
PNG 是一种选用无损紧缩算法的位图格局。其规划意图是试图代替 GIF 和 TIFF 文件格局，一同增加一些 GIF 文件格局所不具备的特性，它自身的规划意图是代替 GIF 格局，所以它与 GIF 有更多相似的地方。 无损紧缩 PNG 文件选用 LZ77 算法的派生算法进行紧缩，其结果是取得高的紧缩比，不丢失数据。它运用特殊的编码办法标记重复呈现的数据，因而对图画的颜色没有影响，也不或许产生颜色的丢失，这样就能够重复保存而不下降图画质量。 相关于 JPEG 和 GIF 来说，它最大的优势在于支撑完整的通明通道。因为支撑通明效果，PNG能够为原图画界说 256 个通明层次，使得彩色图画的边缘能与任何布景滑润地交融，然后彻底地消除锯齿边缘，这种功用是 GIF 和 JPEG 没有的。 |
| GIF |
全称 Graphics Interchange Format，它是无损的、选用索引色的点阵图。GIF 通常情况下只支撑 256 种颜色、通明通道只要 1 bit、文件紧缩比不高。它仅有的优势便是支撑多帧动画。 它通常只支撑 256 色索引颜色，导致只能经过抖动、差值等方法模拟较多丰富的颜色，Alpha 通道只要 1 bit，这意味着一个像素只能是彻底通明或许彻底不通明，会有毛边效果。 |
| APNG |
APNG（Animated Portable Network Graphics）望文生义是依据 PNG 格局扩展的一种动画格局，能够完结 PNG 格局的动态图片效果，旨在替换掉画质低质的 GIF 动画。 它增加了对动画图画的支撑，一同加入了 24 位图画和 8 位 Alpha 通明度的支撑，这意味着动画将拥有更好的质量，其诞生的意图是为了代替老旧的 GIF 格局。 |
| WEBP | WEBP 是 Google 开发以更高的紧缩比代替 JPEG。它用 VP8 视频帧内编码作为其算法根底，拥有很不错的紧缩效果，一同提供了有损紧缩与无损紧缩（可逆紧缩）的方法。 |
| SHARPP | SHARPP 是腾讯音视频实验室自研的依据新一代视频编码标准H.265的图片紧缩技能。紧缩效率相对其他图片格局具有很显着的优势。 |
| AVIF |
AVIF 是一种依据 AV1 视频编码的新图画格局。相关于JPEG，WEBP 这类图片格局来说，它的紧缩率更高，而且画面细节更好。 AVIF 支撑多种颜色空间，包含高动态规模印象（HDR），还包含标准动态规模印象（SDR），以及经由独立编码码位的颜色空间讯号或符合 ICC 颜色特性文件。一同它支撑 8 位元、10 位元、12 位元和更高的颜色深度。 |
依据腾讯视频现有的事务，比照了多组同一图片在相同质量的前提下，不同格局的图片的紧缩情况：
运用 AVIF 紧缩图片是否会形成体会上的影响？肉眼观感较为主观，无法量化。所以咱们也引用了一些客观的目标来进行比照。这儿运用 PSNR（峰值信噪比）和 SSIM（结构相似性）来衡量 AVIF 紧缩之后的图片质量：其中 PSNR 越高，紧缩后失真越小，SSIM 值越大，图画质量越高。
腾讯云数据万象经过不断调整和优化，完结：在相同质量下，AVIF 的 PSNR 和 SSIM 会比 WEBP 更接近甚至更高，但 AVIF 会比 WEBP 下降体积 30% 以上。这是在 95 质量下对图片进行 AVIF 紧缩后的 PSNR 和 SSIM 数据比照。
因而，想要下降静态带宽本钱，运用 AVIF 格局图片是最优的挑选。
03、腾讯视频图片存储两大绝技
3.1 绝技一：AVIF紧缩-悄然变”小“，紧缩率超50%
-
AVIF格局简介
AVIF 是一种依据 AV1 视频编码的新图画格局。相关于 JPEG，WEBP 这类图片格局来说，它的紧缩率更高，画面细节更好。关于 AVIF 的介绍和调研，业内有许多文章介绍。例如：Netflix 的 AVIF for Next-Generation Image Coding。
如下图所示，AVIF 比较较 WEBP 紧缩率 52%左右，比较较 PNG 能够到达惊人的 90% 以上，而且画面效果几乎无影响。
而腾讯云数据万象已早早支撑avif转码功用，其所运用的底层编解码是腾讯自研的 AV1 编解码器——TXAV1 编码器。在 2021 年 MSU 比赛中，关于 AV1 的比赛目标，TXAV1 参加了 29 项，取得了 28 项领先，取得综合最佳。
-
图片紧缩计划
有了上述强力的功用支撑，腾讯视频挑选了数据万象完结图片 AVIF 转码。为了验证效果，咱们也进行了图片巨细的横向比照调研：
比照验证中咱们采取了不同巨细的图片作为样本，别离比照了紧缩成 SHARPP 和 AVIF 格局的图片巨细。从图表中能够显着看出AVIF图的巨细比照原图有着明显下降，甚至相较SHARPP 图都有很大的优化起伏。
在端内咱们经过 hook 图片恳求，在恳求头的 accept 中携带 image/avif 标记当前环境支撑 AVIF 类型图片。比较直接在 URL 后缀拼接 format 参数，在把域名适配支撑 AVIF 后，Web 端能够直接收效，也节约 Web 端的图片带宽本钱，实施流程如下：
在运用方法上，数据万象的 AVIF 紧缩功用也极其便利易用。只需在原拜访链接上增加紧缩参数即可，事务应用及切换非常便捷。此外，腾讯云数据万象与CDN服务完结了打通，仅需在腾讯云CDN控制台敞开装备开关，即可完结域名级别的批量图片优化，非常便捷：
在端内图片解码上，由腾讯云数据万象提供的腾讯自研解码库，能够免费集成。有自研实验室提供的编解码配套服务，性能与稳定性都有了可靠的确保。
-
实践效果
现如今，腾讯视频线上 80% 的图片现已切换成 AVIF 格局，日均 AVIF 恳求到达 35 亿次，全体上均匀图片巨细下降 70%，均匀解码耗时下降 20%。
依据建立的看板数据，咱们也比照了 AVIF 和其他类型图片的数据：
能够直观看到 AVIF 图片均匀巨细 20kb 左右，远低于 PNG/WEBP/SHARPP 等其他图片。
3.2 绝技二：图片采样-最适宜的窗口，显现最适宜的图片
-
图片采样简介
图片采样逻辑，简略来说便是运用腾讯云数据万象的图片缩放及裁剪能力，在恳求图片时依据 View 的实践宽高下载尺度相对适宜的图片，然后防止因图片的原尺度过大超越烘托图片的宽高，形成了带宽糟蹋和内存糟蹋。
经过图片裁剪能力的支撑，腾讯视频端侧能够依据事务指定的尺度实时裁剪生成任意尺度的图片，流程如下：
该战略的一大特点是整个紧缩裁剪过程悉数在云上完结、支撑自界说尺度。确保图片实践下载时能展现最适宜的宽高，然后下降图片传输的带宽本钱，一同还能下降本地图片内存峰值。
-
计划优势
| 云端缩放裁剪，无需事务后端介入，开发本钱低。图片体会无影响，View 烘托尺度等于图片下载时尺度。灵敏度高，能够缩放裁剪成任意尺度，更好适配各个分辨率客户端。下降网络运输本钱，下降客户端内存占用。 |
-
实践效果
在图片下采样战略上线之后，经过线上数据计算：
均匀图片下载巨细——下降 53%
均匀图片内存巨细——下降 24.3%
均匀图片下载耗时——下降 7.8%
均匀图片解码耗时——下降 35.3%
04、 总结
静态带宽本钱优化是一个非常杂乱的项目，涉及到图片、Push、文件下载三个首要大方向，每个方向的计划各不相同。腾讯视频给出的答卷，能够简略总结为以下两个部分：
| AVIF图片紧缩：对线上图片进行AVIF转码，端侧集成AVIF解码能力，从源头下降图片巨细。图片采样战略：依据实践恳求时的窗口巨细对图片进行相应的裁剪及缩放，防止带宽及内存的糟蹋。 |
AVIF 图片紧缩及图片采样战略作为整个腾讯视频静态带宽本钱优化的一部分，对全体本钱的下降起到了无足轻重的效果。在两大绝技双管齐下后，咱们对全体的流量数据也作了一个比照计算：在不考虑用户增加的前提下，腾讯视频事务头部前 10 个图片域名月均流量从 650G 下降到 250G 左右，降幅超越 60%，单位本钱也从 22 年 6 月到 22 年 10 月下降了 57%，22 年 H2 节约超千万本钱。
目前腾讯视频事务根本已全量应用了 AVIF 和图片采样的技能计划，一同也将项目经历同享给腾讯动漫、腾讯新闻等事务，协助更多产品高效的下降静态带宽本钱。读到这儿，期望咱们的事例也能够协助到你，解决图片带宽本钱的头疼问题。
-End-
原创作者｜余锋、王致铭
技能责编｜余锋、王致铭
近两年，「降本增效」是互联网职业抢手话题。如何经过驱动技能迭代，完结更低的本钱和更高的收益，成为开发者有必要面对的问题。欢迎分享你所在技能团队「降本增效」的技能事例/感想。
在谈论区聊一聊你的观点。3月31日前将你的谈论记载截图，发送给腾讯云开发者大众号后台，可领取腾讯云「开发者春季限制红包封面」一个，数量有限先到先得。咱们还将选取点赞量最高的1位朋友，送出腾讯QQ公仔1个。3月31日中午12点开奖。快邀请你的开发者朋友们一同来参加吧！
最近微信改版啦，有粉丝反应收不到小云的文章。
请重视「腾讯云开发者」并点亮星标，
周一三晚8点 和小云一同涨(领)技(福)术(利)！
阅览原文
