騰訊技術分享：騰訊是如何大幅下降帶寬和網絡流量的(圖片壓縮篇)
一、前言
每一年年初騰訊公司都要制定 SNG 成本優化年度目標，過去三年已經用技術手段爲公司節省了超過 10 億的現金流。產品的架構和容量也愈來愈健康，繼續成本優化變得十分艱難。php
但咱們在迷茫中仍然定下了再優化 3 億元的目標。很幸運，2017 年咱們實現了這個目標，並再次得到公司級獎勵，這是很是不容易的。由於「成本與質量」是個平衡木，而 2017 年 SNG 產品面臨着激烈的內外競爭，要下降產品質量是根本不可能的。因此本次文章跟你們分享如何在保障質量（指的是圖片質量、音視頻質量）前提下所作的帶寬和網絡流量壓縮，進而達到運營成本的優化。html
學習交流：程序員
- 即時通信開發交流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篇文章中的第1篇：服務器
《騰訊技術分享：騰訊是如何大幅下降帶寬和網絡流量的(圖片壓縮篇)》（本文）微信
相關技術文章：
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（上篇）》
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（下篇）》
《騰訊原創分享(一)：如何大幅提高移動網絡下手機QQ的圖片傳輸速度和成功率》
《騰訊原創分享(二)：如何大幅壓縮移動網絡下APP的流量消耗（上篇）》
《騰訊原創分享(三)：如何大幅壓縮移動網絡下APP的流量消耗（下篇）》
本文將主要圍繞有關圖片的優化和帶寬壓縮方面的內容，請繼續往下閱讀。
三、關於做者
範晶晶：「我是來自騰訊 SNG 社交網絡運營部，簡稱 DSNO（屌絲 NO.1）團隊的一枚大齡女屌絲。」
騰訊高級工程師，08年進騰訊作資源管理和預覈算，如今主要從事成本優化工做，爲SNG優化項目PM。
四、移動端高流量時代來臨
「在非WiFi環境下玩手機，你會在乎「流量」嗎？」
我在身邊的同事和朋友圈兒作了一樣的調查，獲得的答案差很少，你們對手機流量不怎麼在乎，不喜歡轉菊花和卡頓。我本身用的是騰訊大王卡，騰訊系的免流量，其餘流量全國1元 800 M / 日，我身邊有個開發妹子用的阿里寶卡，1 元 / G 全國日租流量，我領導用的全球通套餐，他本身也不記得多少錢一個月，反正流量用不完，他說他不缺流量缺的是時間，但我總髮現他會偷偷看小視頻，一看就停不下來。
今年 3 月，政府報告提出「取消流量漫遊費，流量資費年內要降低 30% 」 。2020 年 5G 就要問世，網速是 4G 的 5-15 倍。全國人民流量時代即未來臨，上網時長會增長，將承載更多富媒體應用快速增加，像 QQ 相冊、朋友圈、微博、Facebook 是以圖片爲載體的時代，將會有更多快手、抖音、直播基於原創短視頻的傳播，對比文字圖片更具備直觀性，視頻讓人更感同身受，但具備「高帶寬性」。
如今普通手機拍攝的圖片在沒有壓縮的狀況下大約 2M，一段 3 分鐘的小視頻大約 20M，直接存儲或傳輸的，不只浪費用戶帶寬，容易形成菊花和卡頓，如何在不影響質量的前提下把圖片和視頻壓縮到最小，手機耗電發熱更少、網絡傳輸更快，就是提高了用戶體驗。
總之，就像本文將在分享的同樣：用技術手段爲用戶提供低成本高質量的產品體驗纔是將來移動端產品的思路。
五、以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 動圖壓縮因此考慮其餘圖片壓縮格式。
六、新技術選型 TPG 圖片壓縮
騰訊 SNG 音視頻實驗室基於（AVS2 國家標準內核）開發了 TPG 圖片壓縮格式。採用了視頻編碼模式，利用幀間參考，大幅減小冗餘值，提高壓縮率。特別是在動圖上具備高壓縮率和低編解碼耗時的明顯優點，經在 QQ 相冊驗證 TPG 可在同等質量下可將 GIF 大小下降 90%，將 WebP 再下降 21%，比 JPEG 節約 43% 左右。並作了編解碼性能的優化，耗時等都優於 WebP。爲此 17 年全面推廣相冊 TPG 格式化。
右圖是壓縮了11 倍的 TPG 動圖，人眼主觀觀察質量很難看出區別：
七、相冊接入 TPG 圖片壓縮-先後臺解決的困難
全客戶端統一後臺配置：
相冊圖片展現場景複雜，接入方案要適用於移動、PC、H5內核等全部客戶端版本，根據用戶客戶端能力優先返還 TPG > WebP > JPG，右圖是後臺搭建的全客戶端統一後臺配置。
分級壓縮、OC 點分片緩存：
由於 GIF 比較大，壓縮耗時較長，針對不一樣大小的GIF分級壓縮，小於 2M 的實時壓縮，設置 2s超時，2-8M 設置 4s爲超時，大於 8M 的異步壓縮並更新緩存。同時爲了保證 OC 點不會由於 GIF 過大而容易被淘汰，作了分片緩存策略。
兼容性：
對於分享出去的 GIF 咱們給出原 URL，優先保障用戶體驗。
灰度發佈：
做爲首個大致量全面接入 TPG 的業務，爲了保障平滑過渡，首先對新上傳的圖片保障異步壓縮後存儲在源站，被訪問後會存儲在中間源和 OC 點,大概一個月等 TPG 熱數據佔 70% 後，對舊的圖片須要人工觸發或者基於訪問觸發實時壓縮。
八、廉價轉碼資源
TPG 是利用 AVS2 編碼標準 經過很是複雜的計算來提升圖片壓縮比，實際不管是圖片、音頻仍是視頻壓縮比的提高都是增長計算複雜度，等因而用計算資源來換帶寬和存儲，因此帶寬優化須要大量廉價轉碼資源，若是專門採購轉碼服務器，須要大量的現金流。因此咱們用 FPGA 轉碼卡與離線平臺軟硬結合來提供廉價計算資源。
離線平臺：
離線平臺主要經過部署 Docker 的對 CPU 空閒時段進行資源調度。資源來源有母機超賣池、公司和部門資源池、以及線上低負載設備。同時爲了避免影響原有的線上業務和資源池的分配，會經過監控任務的負載狀態來逐步擴縮容，現已實現了小時級調度能力和靈活的分配策略。
FPGA卡：
FPGA 做爲一種高性能、低功耗的可編程芯片，能夠根據客戶定製來作針對性的算法設計。因此在處理海量數據的時候，FPGA 相比於 CPU 和 GPU，優點在於 FPGA計算效率更高，以相冊TPG轉碼爲例，FPGA 卡性能是普通圖片處理服務器的10倍，編碼延時減小 80%，大幅減小用戶等待，採用結合 FPGA 轉碼卡與 Docker 離線軟硬結合，能有效下降轉碼成本,現已節約了幾千臺服務器。
成果：
項目在上半年完成，如今 TPG 請求量佔 80% 以上，節約了 40% 的帶寬，存儲量減小，節約幾千萬/年，質量上反而因爲文件變小，解碼效率提高，用戶等待時長減小了 22%。
九、全類型多場景的圖片壓縮解決方案
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的線程死鎖監控系統技術實踐》
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（上篇）》
《QQ音樂團隊分享：Android中的圖片壓縮技術詳解（下篇）》
《騰訊團隊分享 ：一次手Q聊天界面中圖片顯示bug的追蹤過程分享》
《微信團隊分享：微信Android版小視頻編碼填過的那些坑》
《微信團隊披露：微信界面卡死超級bug「15。。。。」的前因後果》
《月活8.89億的超級IM微信是如何進行Android端兼容測試的》
《微信客戶端團隊負責人技術訪談：如何着手客戶端性能監控和優化》
《微信團隊原創分享：Android版微信的臃腫之困與模塊化實踐之路》
《微信團隊原創分享：微信客戶端SQLite數據庫損壞修復實踐》
《騰訊原創分享(一)：如何大幅提高移動網絡下手機QQ的圖片傳輸速度和成功率》
《騰訊原創分享(二)：如何大幅壓縮移動網絡下APP的流量消耗（下篇）》
《騰訊原創分享(二)：如何大幅壓縮移動網絡下APP的流量消耗（上篇）》
《如約而至：微信自用的移動端IM網絡層跨平臺組件庫Mars已正式開源》
《開源libco庫：單機千萬鏈接、支撐微信8億用戶的後臺框架基石 [源碼下載]》
《微信新一代通訊安全解決方案：基於TLS1.3的MMTLS詳解》
《微信團隊原創分享：Android版微信後臺保活實戰分享(進程保活篇)》
《微信團隊原創分享：Android版微信後臺保活實戰分享(網絡保活篇)》
《Android版微信從300KB到30MB的技術演進(PPT講稿) [附件下載]》
《微信團隊原創分享：Android版微信從300KB到30MB的技術演進》
《微信技術總監談架構：微信之道——大道至簡(PPT講稿) [附件下載]》
《微信海量用戶背後的後臺系統存儲架構(視頻+PPT) [附件下載]》
《微信異步化改造實踐：8億月活、單機千萬鏈接背後的後臺解決方案》
《架構之道：3個程序員成就微信朋友圈日均10億發佈量[有視頻]》
《微信團隊原創分享：Android內存泄漏監控和優化技巧總結》
《微信團隊原創Android資源混淆工具：AndResGuard [有源碼]》
《移動端IM實踐：Android版微信如何大幅提高交互性能（一）》
《移動端IM實踐：Android版微信如何大幅提高交互性能（二）》
《移動端IM實踐：WhatsApp、Line、微信的心跳策略分析》
《移動端IM實踐：谷歌消息推送服務(GCM)研究（來自微信）》
《信鴿團隊原創：一塊兒走過 iOS10 上消息推送(APNS)的坑》
>> 更多同類文章 ……
[2] 有關QQ、微信的技術故事：
《技術往事：微信估值已超5千億，雷軍曾有機會收編張小龍及其Foxmail》
《2017微信數據報告：日活躍用戶達9億、日發消息380億條》
《技術往事：創業初期的騰訊——16年前的冬天，誰動了馬化騰的代碼》
《技術往事：史上最全QQ圖標變遷過程，追尋IM巨人的演進歷史》
《開發往事：深度講述2010到2015，微信一路風雨的背後》
《開發往事：記錄微信3.0版背後的故事（距微信1.0發佈9個月時）》
>> 更多同類文章 ……
（本文同步發佈於：http://www.52im.net/thread-1559-1-1.html）
- 1. 騰訊技術分享：社交網絡圖片的帶寬壓縮技術演進之路
- 2. 騰訊技術官分享出SpringSecurity筆記「全網沸騰」
- 3. 騰訊技術面試官如是說
- 4. 騰訊雲服務器公網帶寬最大值是多少？
- 5. 騰訊技術分享：GIF動圖技術詳解及手機QQ動態表情壓縮技術實踐
- 6. 騰訊雲大學大咖分享 | 探索雲直播技術
- 7. 騰訊雲大學大咖分享 | 騰訊雲知識圖譜實踐
- 8. 騰訊雲大學大咖分享 | 走進騰訊雲物聯網
- 9. 騰訊的前端工程師，是如何精進技術的？
- 10. 騰訊大咖說：騰訊是如何作Unity手遊性能優化的
- 更多相關文章...
- • 網站主機 技術 - 網站主機教程
- • Hibernate的快照技術 - Hibernate教程
- • 三篇文章瞭解 TiDB 技術內幕——說存儲
- • 三篇文章瞭解 TiDB 技術內幕 —— 說計算
-
每一个你不满意的现在，都有一个你没有努力的曾经。