摘要：開啟驗證上傳一張新圖片，使用手安卓版本訪問已支持域名的圖片，如果請求帶了，檢查返回圖片格式是否為如果舊的圖片未按預期返回，返回了或原圖可能是結點緩存，正常天后過期回源則會返回圖片。

對于圖片較多的網站，本文結合具體案例給出了如何基于CDN的sharpP自適應圖片無痛接入方案，據統計效果可在原圖基礎上節省60%-75%的流量。
作者：陳忱

目前移動端運營素材大部分依賴圖片，基于對圖片流量更少，渲染速度更快的訴求，我們推動CDN，X5內核，即通產品部共同推出了一套業務透明，無痛接入的CDN圖片優化方案：基于CDN的sharpP自適應圖片無痛接入方案。據統計效果可在原圖基礎上節省60%-75%的流量，比之前webP無痛接入方案效果提升40%-50%，減少流量的同時提高頁面渲染速度，提升用戶體驗。

效果數據

目前手Q增值業務：VIP中心、游戲中心、動漫、游戲公會、特別關心 以及增值渠道的QQ錢包，空間的個性化商城已經接入sharpP自適應，優化效果數據：

sharpP自適應方案在原有webP自適應方案效果提升40%-50%，提升效果主要來自sharpP高于webP的編碼壓縮率，同時能優化到webP無法覆蓋的png圖片（備注：之前webP無痛方案只實現了jpg的支持），sharpP方案和原圖對比可以節省60%-75%的流量。

以我們的VIP中心為例，之前webP方案：

上sharpP方案后

在圖片增加的情況下 圖片流量減少了近100K，頁面速度也有提升，并且sharpP圖片的效果也經過設計同學的驗證，肉眼幾乎無法區分，圖片質量參數細節后面會介紹。

方案概述

利用自建CDN結點的緩存，以及帶請求頭的回源能力做到同一個URL根據終端分辨率，以及是否支持sharpP解碼，按需返回不同的原圖副本，做到圖片資源的最合理利用：
手Q X5內核支持sharpP圖片的解碼，請求圖片時會帶上accept: image/sharpp標識，User-Agent中會加上手機的分辨率Pixel參數，CDN節點收到請求后，先檢查如果有對應的sharpP自適應副本直接返回，如果沒有則將請求回源到CDN源站，源站會根據請求的User-Agent、Accept參數返回對應分辨率的sharpP圖片副本(原圖上傳后，或第一個用戶請求觸發CDN源站服務器圖片轉換，生成不同尺寸的sharpP圖片), 如果請求頭沒有sharpP標識，則按原有邏輯返回原圖，不影響業務。

整套優化方案接入對基于X5內核的H5業務完全透明，無需改動代碼，即可讓頁面的圖片獲得可觀的圖片專項優化效果；app業務接入，音視頻有提供sharpP解碼的sdk的接入。

方案詳解

1.何為sharpP

sharpP是騰訊公司SNG即通產品部音視頻技術中心推出的一種圖片壓縮組件，現已支持iOS、Android、Windows、Linux四個平臺。編碼壓縮率、編碼耗時、解碼耗時相比webP有明顯的優勢。

2.CDN sharpP方案

在原有webP自適應無痛方案基礎上，我們聯合終端、CDN進一步升級優化，做了如下優化改造：
終端支持：增值業務大部分是基于手Q webview的hybird應用，安卓平臺基于X5內核，X5內核于2.1.1版本開始引入了sharpP組件，支持sharpP解碼，并約定支持sharpP的版本發起的請求會在http請求的頭部帶上Accept: image/sharpp字段，同時X5內核UA中會帶上終端分辨率Pixel字段,iOS平臺由于系統對webview內核的限制，暫時無法很好的嵌入sharpP組件，未能支持sharpP解碼。未來可以在原生app引入sharpP組件，原生請求帶上Accept:image/sharpp，就可以使用到CDN的sharpP能力。

CDN側改造：CDN源站轉換工具集成了sharpP組件，CDN的OC結點新增支持 sharpP副本的緩存，整體流程大致如下：

客戶端發起請求后，OC結點根據請求UA檢查Accept字段是否帶有image/sharpp，并獲取Pixel分辨率信息，OC結點判斷是否有滿足要求的原圖副本緩存，沒有緩存則將URL+請求頭回源，源站識別請求頭中的信息，返回圖片對應的sharpP副本，OC結點緩存下來。源站圖片如果未轉換完成(圖片上傳后或第一次請求觸發CDN源站異步轉換)，源站會先返回原圖,max-age=10,讓OC結點暫時不緩存，再次請求時，判斷轉換完成才返回sharpP圖片并設置默認的緩存時間max-age=25920000。目前CDN sharpP已支持了我們BGtop5流量的域名：

imgcache.gtimg.cn、i.gtimg.cn、imgcache.qq.com、qzonestyle.gtimg.cn、qzs.qq.com

整體方案：結合之前我們做的自適應、webP方案，與sharpP可以完全兼容，在CDN源站是3項多帶帶的配置，可以按需配合或多帶帶使用，整體方案如下圖

優先判斷是否有自適應，然后檢查sharpP，如果sharpP和webP都支持優先返回sharpP。

3.項目中踩過的坑

1）運營商內容劫持，由于同一個URL可能返回不同的內容(不同分辨率的sharpP/原圖) 線上觀察發現聯通運營商會在請求到我們自建CDN結點之前加一層緩存，默認會按URL來緩存內容，其實就是內容劫持，導致不同請求頭，返回錯亂與我們期望的不一致，后面找到一種解決方法，基于http協議的vary字段，CDN源站以及CDN結點返回內容的時候帶上 Vary：User-Agent，Accept 字段，告訴運營商的緩存服務器根據請求的Accept+User-Agent+Url來緩存內容，經驗證可以解決問題。
2）質量參數設置，盡可能保證圖片壓縮的更小，效果與原圖差距不大
sharpP采用有損壓縮，轉換工具會讀取原圖質量參數，適當降低：如果原圖質量參數低于75則保持原質量參數直接轉sharpP，如果質量參數高于75，則在原圖基礎上降低一些質量參數，根據業務要求自行設置，目前根據觀察質量參數不低于75的sharpP圖片基本肉眼無法區分。
3）新的業務開啟sharpP自適應，源站圖片轉換導致磁盤IO壓力過大
用腳本凌晨閑時對存量圖片預轉換生成各尺寸的副本；轉換工具監聽圖片目錄的新增文件，用戶上傳后就做轉換；轉換腳本做了優化，只有第一次請求觸發轉換。
4）sharpP轉換工具對某些圖片轉換失敗，生成空文件
捕獲轉換失敗錯誤碼，空文件用原圖替換，避免返回給結點空文件
5）有時候業務圖片需要強制使用原圖
支持nosharpp參數，url帶上參數后，CDN強制返回原圖。
6）圖片緩存清理
由于一 個圖片URL，對應了多份CDN結點緩存副本，如果圖片更新的時候，可能有個別副本緩存刷新不及時，導致不同分辨率、sharpP、原圖的用戶看到的圖片不一致，需要優化CDN緩存刷新工具，支持一次清理所有緩存副本。
以上皆為項目推進中遇到的問題，未考慮周全可能就會影響功能，線上實施前得在測試結點充分驗證，結點部署要控制節奏，并且要有完善的線上監控機制，以及功能回退的能力。

4.圖片檢測監控

1）為了提高接入效率，減少人工驗證步驟，我們開發了圖片檢測監控工具，定時監控業務頁面圖片在各OC結點返回是否正常。原理：工具根據業務URL，抓取頁面內所有CDN域名的圖片，隨機抽取一部分OC結點，構造sharpP，webP，原圖3種請求，根據返回的圖片格式，大小對比驗證圖片是否正常。

2）現網圖片加載數據上報：為了監控更多用戶的圖片加載真實數據，我們在業務中接入了圖片加載上報組件，原理是利用X5內核收集的資源加載信息，過濾出圖片信息，上報圖片類型，返回碼，加載耗時，網絡類型等。

5.sharpP開啟驗證

上傳一張新圖片，使用手Q安卓版本訪問已支持sharpP域名的CDN圖片，如果請求帶了Accept:image/sharpp，檢查返回圖片格式是否為sharpP

如果舊的圖片未按預期返回，返回了webP或原圖可能是OC結點緩存，正常3天后過期回源則會返回sharpP圖片。

未來規劃

1）app業務接入sharpP優化方案目前只有安卓平臺基于X5內核的應用能得到這套CDN sharpP方案的優化效果，根據CDN日志的流量統計BG內最大的流量還是來自終端發起的請求，后續我們計劃聯合CDN大流量的終端業務接入sharpP解碼組件，讓這套方案能給更多業務帶來收益，同時也為公司和用戶節省流量成本。
2）sharpP工具優化 sharpP組件在不斷優化，包括轉碼效率、成功率，gif格式支持等，CDN轉換工具也將迭代支持。

.
.
.
.

獲取更多云計算技術干貨，可請前往騰訊云技術社區
微信公眾號：騰訊云技術社區（ QcloudCommunity）