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可大幅減少壓縮時間到可接受范圍?，F在已有一些場景（漫畫）在用這種方式。
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）