七牛雲存儲圖片流量優化方案

咱們都知道不一樣的圖片格式在同等圖片質量的狀況下，文件的大小差別很大。好比在同等圖片質量的狀況下，bmp格式比png要大得多，而png可能比jpg又大得多，而jpg又可能比google最新推出的webp格式大得多。

在互聯網時代，不管是移動端仍是web端都追求一個極致的客戶體驗，所以在同等圖片質量的狀況下，擁有較小的文件大小的圖片格式纔是最好的格式。

七牛雲存儲支持webp的格式。你能夠指定imageView2指令的format參數爲webp來獲取一個圖片轉換爲webp格式後的結果。咱們任意取一張圖片來作演示。

圖片	類型	大小
http://qiniulab-public.qiniudn.com/colors.png	image/png	114639
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/jpg	image/jpeg	33495
http://qiniulab-public.qiniudn.com/colors.png?imageView2/0/format/webp	image/webp	14194

上面獲取資源的大小，可使用命令curl -I <資源連接>來獲取資源頭部信息，而後查看Content-Length的值。

雖然這種webp格式擁有如此的魅力，可是因爲不是全部的瀏覽器都支持，另外iOS平臺默認也不支持這種格式，因此看上去沒有辦法在全部的平臺推廣。可是本着最大優化的原則，咱們仍是能夠採用一些措施來極大地下降圖片的流量。

咱們把圖片的訪問分爲移動平臺和web平臺。

對於移動平臺，Android是默認支持的，iOS的話，若是是App，能夠經過這個項目(https://github.com/seanooi/iOS-WebP)來集成webp圖片解碼功能。

對於移動端，目前只有chrome是支持webp格式的，chrome在訪問圖片的時候會默認給Accept頭部添加image/webp值，以下圖所示：

因此業務服務器端能夠根據這種頭部來判斷終端瀏覽器是否支持webp，若是支持的話，返回webp格式的圖片連接，若是不支持那麼返回jpg格式的圖片。這種在動態頁面裏面是很容易實現的。首先利用imageView2和imageMogr2支持webp的特色來將獲取不一樣圖片格式的指令定義爲不一樣的樣式，而後在MVC的結構裏面，Controller能夠去判斷Accept頭部裏面是否有image/web，若是有則返回目標格式爲webp的圖片樣式，不然返回目標格式爲jpeg的圖片格式。

上面的方案讓webp覆蓋了Android和iOS的移動設備和以chrome爲內核的全部瀏覽器。另外對於實在沒法支持的瀏覽器，採用jpeg的格式也會大大減小用戶的流量。