腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(图片压缩篇)
1、前言
每年年初腾讯公司都要制定 SNG 成本优化年度目标，过去三年已经用技术手段为公司节省了超过 10 亿的现金流。产品的架构和容量也越来越健康，继续成本优化变得十分艰难。
但我们在迷茫中仍然定下了再优化 3 亿元的目标。很幸运，2017 年我们实现了这个目标，并再次获得公司级奖励，这是非常不容易的。因为“成本与质量”是个平衡木，而 2017 年 SNG 产品面临着激烈的内外竞争，要降低产品质量是根本不可能的。所以本次文章跟大家分享如何在保障质量（指的是图片质量、音视频质量）前提下所做的带宽和网络流量压缩，进而达到运营成本的优化。
学习交流：
- 即时通讯开发交流3群：185926912 [推荐]
- 移动端IM开发入门文章：《新手入门一篇就够：从零开发移动端IM》
腾讯SNG社交网络事业群介绍：
腾讯SNG社交网络事业群（Social Network Group,简称SNG）是腾讯七大事业群之一，成立于2012年5月，以QQ和QQ空间为基础平台打造全方位的互联网综合服务。在腾讯大体系中，SNG是很重要的基础平台，也是腾讯产品线中用户量最多的事业群。
（本文同步发布于：http://www.52im.net/thread-1559-1-1.html）
2、系列文章
因文章太长，本次分享分为两篇来讲，本文是2篇文章中的第1篇：
《腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(图片压缩篇)》（本文）
《腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(音视频技术篇)》
相关技术文章：
《QQ音乐团队分享：Android中的图片压缩技术详解（上篇）》
《QQ音乐团队分享：Android中的图片压缩技术详解（下篇）》
《腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《腾讯原创分享(三)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《腾讯技术分享：社交网络图片的带宽压缩技术演进之路》
《基于社交网络的Yelp是如何实现海量用户图片的无损压缩的？》
《IM开发基础知识补课(二)：如何设计大量图片文件的服务端存储架构？》
本文将主要围绕有关图片的优化和带宽压缩方面的内容，请继续往下阅读。
3、关于作者
范晶晶：“我是来自腾讯 SNG 社交网络运营部，简称 DSNO（屌丝 NO.1）团队的一枚大龄女屌丝。”
腾讯高级工程师，08年进腾讯做资源管理和预核算，现在主要从事成本优化工作，为SNG优化项目PM。
4、移动端高流量时代来临
“在非WiFi环境下玩手机，你会在意“流量”吗？”
我在身边的同事和朋友圈儿做了同样的调查，得到的答案差不多，大家对手机流量不怎么在意，不喜欢转菊花和卡顿。我自己用的是腾讯大王卡，腾讯系的免流量，其他流量全国1元 800 M / 日，我身边有个开发妹子用的阿里宝卡，1 元 / G 全国日租流量，我领导用的全球通套餐，他自己也不记得多少钱一个月，反正流量用不完，他说他不缺流量缺的是时间，但我总发现他会偷偷看小视频，一看就停不下来。
今年 3 月，政府报告提出“取消流量漫游费，流量资费年内要下降 30% ” 。2020 年 5G 就要问世，网速是 4G 的 5-15 倍。全国人民流量时代即将来临，上网时长会增加，将承载更多富媒体应用快速增长，像 QQ 相册、朋友圈、微博、Facebook 是以图片为载体的时代，将会有更多快手、抖音、直播基于原创短视频的传播，对比文字图片更具有直观性，视频让人更感同身受，但具有“高带宽性”。
现在普通手机拍摄的图片在没有压缩的情况下大约 2M，一段 3 分钟的小视频大约 20M，直接存储或传输的，不仅浪费用户带宽，容易造成菊花和卡顿，如何在不影响质量的前提下把图片和视频压缩到最小，手机耗电发热更少、网络传输更快，就是提升了用户体验。
总之，就像本文将在分享的一样：用技术手段为用户提供低成本高质量的产品体验才是未来移动端产品的思路。
5、以QQ 相册图片压缩为例
我们来看看QQ 相册图片压缩的例子。QQ 相册业务发展较为平稳，总图片数有上万亿张，每日新增上传图片几百万张，每日下载图片几百亿张，外网带宽日峰值上百G，成本压力一直存在。
我们进行了各种维度的技化的实践，包括使用新的图片格式、最新的技术以及一些技巧等。
5.1 使用WebP格式进行图片压缩
用户上传的图片一般有三种主流格式：JPEG、PNG 和 GIF 动图，15 年 QQ 相册用Google 的 WebP 格式用户上传的原图进行后台压缩，在保障同等质量下的 WebP 图片比原图体积小 30%。
5.2 使用分辨率自适应
用户终端机型分辨率存在大小不一，但一些产品是以最大分辨率下发的，但中低端机型并不需要高分辨率的图片，优化为按需返回适当分辨率图，可节约 20% 的流量。15 年做的这 2 个优化都是在保障图片清晰度不变的前提下，为用户和企业节约了流量和存储空间。
5.3 GIF 动图压缩
16 年底相册推出新功能，用户在发表说说时可以选择自己的照片合成 GIF 动图，新功能导致流量增长非常迅猛，对应的外网带宽成本上增 70%。流量分析发现仅有 5% 下载次数的 GIF 格式图片占用了 20% 带宽，剩下大部分是经过 WebP 格式压缩过图片。
GIF 动图相当于一组图片的集合，可以把它看做一个小视频，但 GIF 格式是一种位图文件格式，是利用颜色表索引来表示每个像素颜色，然后标记重复出现的数据，编码过程对图片颜色数据没有损失，是一种无损压缩方式，相比视频压缩算法压缩率比较低，用户自己编辑的 GIF 大小普遍在 2-4M，是普通图片几十倍，占用户和企业的下载流量和存储都很大，当时用的开源 WebP 不支持 GIF 动图压缩所以考虑其他图片压缩格式。
6、新技术选型 TPG 图片压缩
腾讯 SNG 音视频实验室基于（AVS2 国家标准内核）开发了 TPG 图片压缩格式。采用了视频编码模式，利用帧间参考，大幅减少冗余值，提升压缩率。特别是在动图上具有高压缩率和低编解码耗时的明显优势，经在 QQ 相册验证 TPG 可在同等质量下可将 GIF 大小降低 90%，将 WebP 再降低 21%，比 JPEG 节约 43% 左右。并做了编解码性能的优化，耗时等都优于 WebP。为此 17 年全面推广相册 TPG 格式化。
右图是压缩了11 倍的 TPG 动图，人眼主观观察质量很难看出区别：
7、相册接入 TPG 图片压缩-前后台解决的困难
全客户端统一后台配置：
相册图片展示场景复杂，接入方案要适用于移动、PC、H5内核等所有客户端版本，根据用户客户端能力优先返还 TPG > WebP > JPG，右图是后台搭建的全客户端统一后台配置。
分级压缩、OC 点分片缓存：
因为 GIF 比较大，压缩耗时较长，针对不同大小的GIF分级压缩，小于 2M 的实时压缩，设置 2s超时，2-8M 设置 4s为超时，大于 8M 的异步压缩并更新缓存。同时为了保证 OC 点不会因为 GIF 过大而容易被淘汰，做了分片缓存策略。
兼容性：
对于分享出去的 GIF 我们给出原 URL，优先保障用户体验。
灰度发布：
作为首个大体量全面接入 TPG 的业务，为了保障平滑过渡，首先对新上传的图片保障异步压缩后存储在源站，被访问后会存储在中间源和 OC 点,大概一个月等 TPG 热数据占 70% 后，对旧的图片需要人工触发或者基于访问触发实时压缩。
8、廉价转码资源
TPG 是利用 AVS2 编码标准 通过非常复杂的计算来提高图片压缩比，实际无论是图片、音频还是视频压缩比的提升都是增加计算复杂度，等于是用计算资源来换带宽和存储，所以带宽优化需要大量廉价转码资源，如果专门采购转码服务器，需要大量的现金流。所以我们用 FPGA 转码卡与离线平台软硬结合来提供廉价计算资源。
离线平台：
离线平台主要通过部署 Docker 的对 CPU 空闲时段进行资源调度。资源来源有母机超卖池、公司和部门资源池、以及线上低负载设备。同时为了不影响原有的线上业务和资源池的分配，会通过监控任务的负载状态来逐步扩缩容，现已实现了小时级调度能力和灵活的分配策略。
FPGA卡：
FPGA 作为一种高性能、低功耗的可编程芯片，可以根据客户定制来做针对性的算法设计。所以在处理海量数据的时候，FPGA 相比于 CPU 和 GPU，优势在于 FPGA计算效率更高，以相册TPG转码为例，FPGA 卡性能是普通图片处理服务器的10倍，编码延时减少 80%，大幅减少用户等待，采用结合 FPGA 转码卡与 Docker 离线软硬结合，能有效降低转码成本,现已节约了几千台服务器。
成果：
项目在上半年完成，现在 TPG 请求量占 80% 以上，节约了 40% 的带宽，存储量减少，节约几千万/年，质量上反而由于文件变小，解码效率提升，用户等待时长减少了 22%。
9、全类型多场景的图片压缩解决方案
TPG 编码压缩虽然在压缩率上更优，但需要客户端和 PC 具备解码 SDK 才能正常使用，现在推广阶段，现网仍存在很多原图（JPEG、PNG、GIF）请求量。
Guetzli 是 Google 2017 年最新推出的图片压缩格式，比同等质量的 JPEG 节约 30%大小，此算法并没有改变 JPEG 编码格式，只是对数据进行优化缩减，因此编码出来的图片适用于目前已有的解码器。但它的计算开销非常大，耗时不可接受。GPU 相比传统 CPU 具备高并发的图片类计算能力，Guetzli & GPU可大幅减少压缩时间到可接受范围。现在已有一些场景（漫画）在用这种方式。
HEIF 是 H.265 标准的建议格式，比 JPEG 小 40%，苹果 iPhone7 升级 IOS 11 以上拍摄直接生成的是HEIF格式，同等质量文件大小和TPG差不多。腾讯的图片平台支持这种格式的存储和请求返回，只需客户端请求上做改造即可。相册、微云都已使用，如果两个 iPhone7（IOS11）用户互发本机拍摄的图片（HEIF 格式），则无需转码可比原 JPEG 图节约 40% 以上的流量和存储，在其他不支持的客户端下载时需转码为其他格式。所以针对部分苹果用户体验更好，要成为主流还有待普及。
经过三年的积累腾讯搭建了一套全类型多场景的图片压缩解决方案，根据用户客户端情况返还最优的图片格式，降低业务接入门槛，如下右图。
（未完待续，请继续关注下篇《腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(音视频技术篇)》）
附录：微信、QQ技术文章汇总
[1] QQ、微信团队原创技术文章：
《腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(图片压缩篇)》
《腾讯技术分享：腾讯是如何大幅降低带宽和网络流量的(音视频技术篇)》
《微信团队分享：微信移动端的全文检索多音字问题解决方案》
《腾讯技术分享：Android版手机QQ的缓存监控与优化实践》
《微信团队分享：iOS版微信的高性能通用key-value组件技术实践》
《微信团队分享：iOS版微信是如何防止特殊字符导致的炸群、APP崩溃的？》
《腾讯技术分享：Android手Q的线程死锁监控系统技术实践》
《微信团队原创分享：iOS版微信的内存监控系统技术实践》
《让互联网更快：新一代QUIC协议在腾讯的技术实践分享》
《iOS后台唤醒实战：微信收款到账语音提醒技术总结》
《腾讯技术分享：社交网络图片的带宽压缩技术演进之路》
《微信团队分享：视频图像的超分辨率技术原理和应用场景》
《微信团队分享：微信每日亿次实时音视频聊天背后的技术解密》
《QQ音乐团队分享：Android中的图片压缩技术详解（上篇）》
《QQ音乐团队分享：Android中的图片压缩技术详解（下篇）》
《腾讯团队分享：手机QQ中的人脸识别酷炫动画效果实现详解》
《腾讯团队分享 ：一次手Q聊天界面中图片显示bug的追踪过程分享》
《微信团队分享：微信Android版小视频编码填过的那些坑》
《微信手机端的本地数据全文检索优化之路》
《企业微信客户端中组织架构数据的同步更新方案优化实战》
《微信团队披露：微信界面卡死超级bug“15。。。。”的来龙去脉》
《QQ 18年：解密8亿月活的QQ后台服务接口隔离技术》
《月活8.89亿的超级IM微信是如何进行Android端兼容测试的》
《以手机QQ为例探讨移动端IM中的“轻应用”》
《一篇文章get微信开源移动端数据库组件WCDB的一切！》
《微信客户端团队负责人技术访谈：如何着手客户端性能监控和优化》
《微信后台基于时间序的海量数据冷热分级架构设计实践》
《微信团队原创分享：Android版微信的臃肿之困与模块化实践之路》
《微信后台团队：微信后台异步消息队列的优化升级实践分享》
《微信团队原创分享：微信客户端SQLite数据库损坏修复实践》
《腾讯原创分享(一)：如何大幅提升移动网络下手机QQ的图片传输速度和成功率》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（下篇）》
《腾讯原创分享(二)：如何大幅压缩移动网络下APP的流量消耗（上篇）》
《微信Mars：微信内部正在使用的网络层封装库，即将开源》
《如约而至：微信自用的移动端IM网络层跨平台组件库Mars已正式开源》
《开源libco库：单机千万连接、支撑微信8亿用户的后台框架基石 [源码下载]》
《微信新一代通信安全解决方案：基于TLS1.3的MMTLS详解》
《微信团队原创分享：Android版微信后台保活实战分享(进程保活篇)》
《微信团队原创分享：Android版微信后台保活实战分享(网络保活篇)》
《Android版微信从300KB到30MB的技术演进(PPT讲稿) [附件下载]》
《微信团队原创分享：Android版微信从300KB到30MB的技术演进》
《微信技术总监谈架构：微信之道——大道至简(演讲全文)》
《微信技术总监谈架构：微信之道——大道至简(PPT讲稿) [附件下载]》
《如何解读《微信技术总监谈架构：微信之道——大道至简》》
《微信海量用户背后的后台系统存储架构(视频+PPT) [附件下载]》
《微信异步化改造实践：8亿月活、单机千万连接背后的后台解决方案》
《微信朋友圈海量技术之道PPT [附件下载]》
《微信对网络影响的技术试验及分析（论文全文）》
《一份微信后台技术架构的总结性笔记》
《架构之道：3个程序员成就微信朋友圈日均10亿发布量[有视频]》
《快速裂变：见证微信强大后台架构从0到1的演进历程（一）》
《快速裂变：见证微信强大后台架构从0到1的演进历程（二）》
《微信团队原创分享：Android内存泄漏监控和优化技巧总结》
《全面总结iOS版微信升级iOS9遇到的各种“坑”》
《微信团队原创资源混淆工具：让你的APK立减1M》
《微信团队原创Android资源混淆工具：AndResGuard [有源码]》
《Android版微信安装包“减肥”实战记录》
《iOS版微信安装包“减肥”实战记录》
《移动端IM实践：iOS版微信界面卡顿监测方案》
《微信“红包照片”背后的技术难题》
《移动端IM实践：iOS版微信小视频功能技术方案实录》
《移动端IM实践：Android版微信如何大幅提升交互性能（一）》
《移动端IM实践：Android版微信如何大幅提升交互性能（二）》
《移动端IM实践：实现Android版微信的智能心跳机制》
《移动端IM实践：WhatsApp、Line、微信的心跳策略分析》
《移动端IM实践：谷歌消息推送服务(GCM)研究（来自微信）》
《移动端IM实践：iOS版微信的多设备字体适配方案探讨》
《信鸽团队原创：一起走过 iOS10 上消息推送(APNS)的坑》
《腾讯信鸽技术分享：百亿级实时消息推送的实战经验》
>> 更多同类文章 ……
[2] 有关QQ、微信的技术故事：
《技术往事：微信估值已超5千亿，雷军曾有机会收编张小龙及其Foxmail》
《QQ和微信凶猛成长的背后：腾讯网络基础架构的这些年》
《闲话即时通讯：腾讯的成长史本质就是一部QQ成长史》
《2017微信数据报告：日活跃用户达9亿、日发消息380亿条》
《腾讯开发微信花了多少钱？技术难度真这么大？难在哪？》
《技术往事：创业初期的腾讯——16年前的冬天，谁动了马化腾的代码》
《技术往事：史上最全QQ图标变迁过程，追寻IM巨人的演进历史》
《技术往事：“QQ群”和“微信红包”是怎么来的？》
《开发往事：深度讲述2010到2015，微信一路风雨的背后》
《开发往事：微信千年不变的那张闪屏图片的由来》
《开发往事：记录微信3.0版背后的故事（距微信1.0发布9个月时）》
《一个微信实习生自述：我眼中的微信开发团队》
《首次揭秘：QQ实时视频聊天背后的神秘组织》
>> 更多同类文章 ……
（本文同步发布于：http://www.52im.net/thread-1559-1-1.html）