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

對于圖片較多的網(wǎng)站，本文結(jié)合具體案例給出了如何基于CDN的sharpP自適應(yīng)圖片無痛接入方案，據(jù)統(tǒng)計效果可在原圖基礎(chǔ)上節(jié)省60%-75%的流量。
作者：陳忱

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

效果數(shù)據(jù)

目前手Q增值業(yè)務(wù)：VIP中心、游戲中心、動漫、游戲公會、特別關(guān)心 以及增值渠道的QQ錢包，空間的個性化商城已經(jīng)接入sharpP自適應(yīng)，優(yōu)化效果數(shù)據(jù)：

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

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

上sharpP方案后

在圖片增加的情況下 圖片流量減少了近100K，頁面速度也有提升，并且sharpP圖片的效果也經(jīng)過設(shè)計同學(xué)的驗證，肉眼幾乎無法區(qū)分，圖片質(zhì)量參數(shù)細(xì)節(jié)后面會介紹。

方案概述

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

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

方案詳解

1.何為sharpP

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

2.CDN sharpP方案

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

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

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

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

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

優(yōu)先判斷是否有自適應(yīng)，然后檢查sharpP，如果sharpP和webP都支持優(yōu)先返回sharpP。

3.項目中踩過的坑

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

4.圖片檢測監(jiān)控

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

2）現(xiàn)網(wǎng)圖片加載數(shù)據(jù)上報：為了監(jiān)控更多用戶的圖片加載真實數(shù)據(jù)，我們在業(yè)務(wù)中接入了圖片加載上報組件，原理是利用X5內(nèi)核收集的資源加載信息，過濾出圖片信息，上報圖片類型，返回碼，加載耗時，網(wǎng)絡(luò)類型等。

5.sharpP開啟驗證

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

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

未來規(guī)劃

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

.
.
.
.

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