「前端」webp圖片適配流量優化

尚妝產品技術刊讀發表於2017-02-28

本文來自尚妝前端團隊南洋

發表於尚妝部落格，歡迎訂閱。

圖片流量優化

重新整理一個頁面消耗的流量除了指令碼樣式檔案以外，大頭其實在下載的圖片。一張圖片動輒幾十kb，想盡辦法優化樣式、指令碼檔案所優化的圖片流量其實還不如一張圖片大。

本文從兩個角度介紹如何對圖片流量進行優化。本文進行圖片流量優化的前提都是對於移動端而言。

webp

首先從圖片格式方面著手，webp（google官方網址）是谷歌推出的一種圖片格式，優點在於同等畫面質量下，體積比jpg、png少了25%以上。以兩張jpg、png圖片為例：

size	JPG	PNG
無壓縮	165kb	55kb
tinypng壓縮	75kb	20kb
webp轉換	54kb	6.1kb

由表格的羅列可知，將圖片轉換為webp格式，圖片的體積比tinypng壓縮完後的體積還要小，且圖片質量甚至還要高於tinypng壓縮。

雖然webp格式的圖片相對於png和jpg體積小質量高，但是目前的相容性在全球範圍只達到了70%左右。（caniuse截止20160911）

根據caniuse，目前在移動端安卓機型4.4以上全部支援，但是ios全軍覆滅。我司使用者ios、安卓55分成，支援了webp至少能為一半使用者提供更小體積的圖片體驗。而且據說ios10系統將支援webp，這樣一來我司產品的webp支援度將會更高。ios10有望支援webp

圖片伺服器支援webp轉換

我司原本就有基於nginx+lua+graphicsmagick的圖片縮圖功能，具體使用方法類似

http://cdn1.shwojoy.com/images/34/xxxxx.png

http://cdn1.shwojoy.com/images/34/xxxxx.png.300x300.png

為了支援webp轉換需要修改原先的lua指令碼，新增對.webp字尾的識別。使之能對類似xxxxx.png.300x300.png.webp或者xxxxx.png.webp這樣的域名進行識別並轉換。

nginx+lua+graphicsmagick這套方案其實做的事情就是nginx對域名進行攔截，lua指令碼進行域名字尾規則的匹配，比如說300x300.png/.webp類似的字尾，匹配完成後再在lua裡呼叫graphicsmagick的命令，進行一些圖片轉換、裁剪等工作。

lua指令碼片段

if table.isLegal(size_list) and extend == "webp" then
        command = [[/usr/local/GraphicsMagick-1.3.25/bin/gm convert -quality 75 -density 72 +profile "*"  ]] .. ngx.var.image_root ..  originalUri  .. " -geometry " .. area .. " " .. ngx.var.file;
        os.execute(command);
end複製程式碼

值得注意的是graphicsmagick版本在1.3.20及以上才支援webp download

graphicsmagick能做到轉換webp還需要下載編譯libwebp。graphicsmagick支援webp教程

圖片伺服器支援webp轉換後，就能實時轉化webp格式的圖片了，為接下來的webp相容方案提供了技術支援。

webp相容方案

目前在瀏覽器端判斷是否支援webp最好的方法就是特性檢測法。根據檢測結果將是否支援webp的值存入cookie，供之後需要判斷webp相容性的地方使用。

特性檢測指令碼：(參考)

;(function(doc) {

        // 給html根節點加上webps類名
        function addRootTag() {
            doc.documentElement.className += " webpa";
        }

        // 判斷是否有webp_showjoy=available這個cookie
        if (!/webp_showjoy=available/.test(document.cookie)) {
            var image = new Image();

            // 圖片載入完成時候的操作
            image.onload = function() {

                // 圖片載入成功且寬度為1，那麼就代表支援webp了，因為這張base64圖是webp格式。如果不支援會觸發image.error方法
                if (image.width == 1) {

                    // html根節點新增class，並且埋入cookie
                    addRootTag();
                    document.cookie = "webp_showjoy=available; max-age=31536000; domain=";
                }
            };

            // 一張支援alpha透明度的webp的圖片，使用base64編碼
            image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
        } else {
            addRootTag();
        }
    }(document));複製程式碼

如果瀏覽器支援webp格式的圖片則在cookie中設定標誌，並且在html標籤上設定webpaclassName，這個classname的作用是在less檔案中相容webp圖片。

less檔案中的webp相容

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}複製程式碼

這段less取代了原先在less檔案中描述背景圖片的程式碼。

比如原先定義背景圖片

div {
  background-image: url(xx);
}複製程式碼

現在使用相容方案則為：

div {
  webpbg(xxx);
}複製程式碼

html檔案中的webp圖片相容

我司目前html部分通過java的velocity編寫，對於同步傳遞到頁面上的圖片webp將通過如下方式相容。

<img class="slider-img" src="$!{banner.recordMap.get('圖片地址').value}.750x448.jpg$!{isWebp}">複製程式碼

$!{isWebp} 變數是後臺通過判斷瀏覽器請求的cookie中是否有之前定義的webp_showjoy=available，有則返回.webp字尾，無則返回空。

這樣有個問題是使用者第一次瀏覽產品頁面時後臺判斷cookie永遠是false，所以使用者第一次瀏覽是不可能返回.webp字尾的圖片的。

還有一種情況是圖片大量使用的時候我們會使用懶載入進行圖片的延遲載入。這時就可以修改懶載入外掛，在外掛裡動態相容webp圖片了。

/* 根據cookie返回圖片是否webp的地址 */
function getwebpsrc (imgsrc) {
    var needwebp = false,
        src = '';
    if (/webp_showjoy=available/.test(document.cookie)) {
        needwebp = true;
    }
    src = needwebp ? imgsrc + '.webp' : imgsrc;
    return src;
}複製程式碼

到此就完成了移動端對webp格式圖片的支援。這也是圖片流量優化其中之一方案。

retina相容圖片流量優化

前端應該都瞭解在retina屏下應該使用@2x或者@3x等倍率的圖片，才能保證圖片的清晰度。但是為了切圖方便，部分公司都會統一在切圖階段切出@2x的圖片，不管瀏覽裝置是retina屏還是普通屏，一律都使用@2x的圖片。這樣做有兩個壞處，一是@2x的圖片在非retina屏下會出現downsampled現象，雖然不會影響清晰度，但是會缺少一些銳利度。二是@2x的圖片相比較@1x的圖片，前者體積大於後者，這也就造成了流量的浪費以及影響頁面開啟效能。

所以正確處理方法是針對retina屏的是否採用不同尺寸的圖片。圖片裁剪已經在圖片伺服器上實現。在考慮retina時也需要加上webp的相容，兩者一起作用會大大減少圖片的尺寸。

@2x http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png.300x300.png.webp
@1x http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png.150x150.png.webp複製程式碼

less檔案相容retina

.retinabg(@file-2x; @reg-2x; @reg-1x; @type) when (isstring(@reg-2x)) {

  background-image: url("@{file-2x}.@{reg-1x}.@{type}");
  .webpa & {
    background-image: url('@{file-2x}.@{reg-1x}.@{type}.webp');
  }
  @media
  only screen and (-webkit-min-device-pixel-ratio: 2),
  only screen and (   min--moz-device-pixel-ratio: 2),
  only screen and (     -o-min-device-pixel-ratio: 2/1),
  only screen and (        min-device-pixel-ratio: 2),
  only screen and (                min-resolution: 192dpi),
  only screen and (                min-resolution: 2dppx) {
    background-image: url("@{file-2x}.@{reg-2x}.@{type}");
    .webpa & {
      background-image: url('@{file-2x}.@{reg-2x}.@{type}.webp');
    }
  }
}複製程式碼

當要代替原先書寫時的background-image: url(),可以寫成如下方式：

.retinabg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png; 300x300; 150x150; png)複製程式碼

html檔案相容retina

在html中本次方案准備使用html5特性srcset屬性。

secset屬性的目的在於允許開發者為某個圖片的屬性指定一系列的來源，其中這些圖片的來源是要根據客戶端螢幕的畫素解析度來設定的。

比如在volecity模板中定義圖片資源：

<img class="pic" src="$!{newProduct.image}.300x300.png$!{isWebp}" srcset="$!{newProduct.image}.150x150.png$!{isWebp} 1x, $!{newProduct.image}.300x300.png$!{isWebp} 2x">複製程式碼

這段圖片定義說明了在retina（2x）螢幕下使用300x300的圖片來源，而在飛retina屏下（1x）下使用150x150的圖。

html中懶載入的圖片

由於懶載入的圖片在外掛中就會進行src賦值的操作，所以直接在懶載入外掛中根據window.devicePixelRatio進行判斷修改圖片url。

/* 根據cookie返回圖片是否webp的地址 */
/* 根據dpr返回不同尺寸的圖片 */
function getwebpsrc (imgsrc) {
    var areaInfo = '';
    if (window.devicePixelRatio && window.devicePixelRatio <= 1) {
        var area = imgsrc.match(/[0-9]+x[0-9]+/);
        if (area) {
            var areaSplit = area[0].split('x');
            areaInfo = areaSplit[0] /2 + 'x' + areaSplit[1] /2;
            imgsrc = imgsrc.replace(/[0-9]+x[0-9]+/, areaInfo)
        }
    }
    var needwebp = false,
        src = '';
    if (/webp_showjoy=available/.test(document.cookie)) {
        needwebp = true;
    }
    src = needwebp ? imgsrc + '.webp' : imgsrc;
    return src;
}複製程式碼

在這個方案下所有圖片的編寫都必須要帶上尺寸字尾（_num_x_num_）,在我司圖片伺服器支援下還有一個特別的好處：圖片伺服器會對帶有尺寸字尾的圖片進行尺寸裁剪的同時進行圖片壓縮，遇到不支援webp格式的瀏覽器上就會順帶對圖片進行壓縮，盡力地減小圖片體積。

srcset屬性目前在移動端的相容性十分不錯，安卓4.x版本不支援。

總結

一共兩點圖片流量優化方案，一是針對webp圖片格式，二是針對retina。最後總結下來的編寫圖片程式碼的情景就為3種：

1.html同步圖片編寫

<img class="pic" src="$!{newProduct.image}.300x300.png$!{isWebp}" srcset="$!{newProduct.image}.150x150.png$!{isWebp} 1x, $!{newProduct.image}.300x300.png$!{isWebp} 2x">複製程式碼

2.懶載入圖片編寫

<img class="goods-pic j_Lazyload" data-original="{{$value.image}}.300x300.png" src="http://cdn1.showjoy.com/images/a5/a560e106324d4670acd11b69aee0f11f.png">複製程式碼

3.less

.retinabg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png; 300x300; 150x150; png)



webpbg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png);複製程式碼

對我以上的理解有疑問和意見的歡迎找我私聊~微博-寫前端的暹羅

iOS 客戶端基於 WebP 圖片格式的流量優化（下）
2016-08-20
iOS客戶端Web優化
前端效能優化之WebP
2017-06-28
前端優化Web
前端效能優化 --- 圖片優化
2018-08-29
前端優化
web前端優化之圖片優化
2017-09-01
Web前端優化
android 圖片適配
2017-12-01
Android
淺探前端圖片優化
2018-12-25
前端優化
如何生成WebP圖片
2019-03-01
Web
前端效能優化之路——圖片篇。
2018-03-07
前端優化
前端:WebP自適應實踐
2021-11-25
前端Web
Flutter圖片解析度適配
2019-07-19
Flutter
【前端優化】js圖片懶載入及優化
2019-07-05
前端優化JS
WebP 在減少圖片體積和流量上的效果如何？—— WebP 技術實踐分享
2017-10-19
Web
前端優化之圖片懶載入
2018-06-12
前端優化
【學習圖片】08：WebP
2023-03-02
Web
WEB前端優化：使用“漸進”圖片或“交錯”圖片
2013-07-18
Web前端優化
如何通過 WebP 自適應方案減少圖片資源大小
2017-05-12
Web
圖片優化
2018-06-18
優化
Web效能優化：圖片優化
2014-12-10
Web優化
網站優化之路—圖片優化，圖片從模糊到清晰
2017-10-14
網站優化
擁抱SVG：苦惱於圖片適配 in Android？
2016-09-19
SVGAndroid
iOS載入WebP格式圖片小結
2017-01-14
iOSWeb
讓你的工程支援WebP格式圖片
2017-12-25
Web
效能優化04-圖片優化
2018-05-16
優化
Web效能優化之圖片優化
2014-12-10
Web優化
藉助系統自帶圖片裁剪整合圖片選擇以及7.0適配
2017-12-19
前端效能優化-圖片懶載入（防抖、節流）
2019-12-31
前端優化
關於圖片適配不同尺寸的image View（實戰）
2019-04-05
View
Android效能優化——圖片優化（二）
2019-03-04
Android優化
站點優化之 WebP 實戰
2019-02-28
優化Web
node服務適配前端路由
2019-03-14
前端路由
前端iPhone X適配總結
2018-03-19
前端iPhone
淺談移動前端適配
2018-04-11
前端
APP查詢圖片優化
2018-10-15
APP優化
圖片優化的那些工具
2014-06-26
優化
Android圖示適配
2019-03-01
Android
Swift 優雅的適配大小
2018-10-24
Swift
前端效能最佳化——圖片最佳化
2023-04-04
前端
安卓元件化應用的6.0許可權適配優化方案
2017-08-10
安卓元件化優化