本文來自尚妝前端團(tuán)隊(duì)南洋

發(fā)表于尚妝博客，歡迎訂閱。

圖片流量優(yōu)化

刷新一個(gè)頁面消耗的流量除了腳本樣式文件以外，大頭其實(shí)在下載的圖片。一張圖片動(dòng)輒幾十kb，想盡辦法優(yōu)化樣式、腳本文件所優(yōu)化的圖片流量其實(shí)還不如一張圖片大。

本文從兩個(gè)角度介紹如何對圖片流量進(jìn)行優(yōu)化。本文進(jìn)行圖片流量優(yōu)化的前提都是對于移動(dòng)端而言。

webp

首先從圖片格式方面著手，webp（google官方網(wǎng)址）是谷歌推出的一種圖片格式，優(yōu)點(diǎn)在于同等畫面質(zhì)量下，體積比jpg、png少了25%以上。以兩張jpg、png圖片為例：

JPG http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg
PNG http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png

size	JPG	PNG
無壓縮	165kb	55kb
tinypng壓縮	75kb	20kb
webp轉(zhuǎn)換	54kb	6.1kb

由表格的羅列可知，將圖片轉(zhuǎn)換為webp格式，圖片的體積比tinypng壓縮完后的體積還要小，且圖片質(zhì)量甚至還要高于tinypng壓縮。

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

根據(jù)caniuse，目前在移動(dòng)端安卓機(jī)型4.4以上全部支持，但是ios全軍覆滅。我司用戶ios、安卓55分成，支持了webp至少能為一半用戶提供更小體積的圖片體驗(yàn)。而且據(jù)說ios10系統(tǒng)將支持webp，這樣一來我司產(chǎn)品的webp支持度將會更高。ios10有望支持webp

圖片服務(wù)器支持webp轉(zhuǎn)換

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

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

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

為了支持webp轉(zhuǎn)換需要修改原先的lua腳本，添加對.webp后綴的識別。使之能對類似xxxxx.png.300x300.png.webp或者xxxxx.png.webp這樣的域名進(jìn)行識別并轉(zhuǎn)換。

nginx+lua+graphicsmagick這套方案其實(shí)做的事情就是nginx對域名進(jìn)行攔截，lua腳本進(jìn)行域名后綴規(guī)則的匹配，比如說300x300.png/.webp類似的后綴，匹配完成后再在lua里調(diào)用graphicsmagick的命令，進(jìn)行一些圖片轉(zhuǎn)換、裁剪等工作。

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能做到轉(zhuǎn)換webp還需要下載編譯libwebp。graphicsmagick支持webp教程

圖片服務(wù)器支持webp轉(zhuǎn)換后，就能實(shí)時(shí)轉(zhuǎn)化webp格式的圖片了，為接下來的webp兼容方案提供了技術(shù)支持。

http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg
http://cdn1.showjoy.com/images/c9/c9c2221942774550ad53342da23774de.jpg.webp

webp兼容方案

目前在瀏覽器端判斷是否支持webp最好的方法就是特性檢測法。根據(jù)檢測結(jié)果將是否支持webp的值存入cookie，供之后需要判斷webp兼容性的地方使用。

特性檢測腳本：(參考)

;(function(doc) {
  
        // 給html根節(jié)點(diǎn)加上webps類名
        function addRootTag() {
            doc.documentElement.className += " webpa";
        }
  
        // 判斷是否有webp_showjoy=available這個(gè)cookie
        if (!/webp_showjoy=available/.test(document.cookie)) {
            var image = new Image();
  
            // 圖片加載完成時(shí)候的操作
            image.onload = function() {
  
                // 圖片加載成功且寬度為1，那么就代表支持webp了，因?yàn)檫@張base64圖是webp格式。如果不支持會觸發(fā)image.error方法
                if (image.width == 1) {
  
                    // html根節(jié)點(diǎn)添加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中設(shè)置標(biāo)志，并且在html標(biāo)簽上設(shè)置webpaclassName，這個(gè)classname的作用是在less文件中兼容webp圖片。

less文件中的webp兼容

.webpbg(@url) {
  background-image: url(@url);
  .webpa & {
    background-image: url('@{url}.webp');
  }
}

這段less取代了原先在less文件中描述背景圖片的代碼。

比如原先定義背景圖片

div {
  background-image: url(xx);
}

現(xiàn)在使用兼容方案則為：

div {
  webpbg(xxx);
}

html文件中的webp圖片兼容

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

![]($!{banner.recordMap.get('圖片地址').value}.750x448.jpg$!{isWebp})

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

這樣有個(gè)問題是用戶第一次瀏覽產(chǎn)品頁面時(shí)后臺判斷cookie永遠(yuǎn)是false，所以用戶第一次瀏覽是不可能返回.webp后綴的圖片的。

還有一種情況是圖片大量使用的時(shí)候我們會使用懶加載進(jìn)行圖片的延遲加載。這時(shí)就可以修改懶加載插件，在插件里動(dòng)態(tài)兼容webp圖片了。

/* 根據(jù)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;
}

到此就完成了移動(dòng)端對webp格式圖片的支持。這也是圖片流量優(yōu)化其中之一方案。

retina兼容圖片流量優(yōu)化

前端應(yīng)該都了解在retina屏下應(yīng)該使用@2x或者@3x等倍率的圖片，才能保證圖片的清晰度。但是為了切圖方便，部分公司都會統(tǒng)一在切圖階段切出@2x的圖片，不管瀏覽設(shè)備是retina屏還是普通屏，一律都使用@2x的圖片。這樣做有兩個(gè)壞處，一是@2x的圖片在非retina屏下會出現(xiàn)downsampled現(xiàn)象，雖然不會影響清晰度，但是會缺少一些銳利度。二是@2x的圖片相比較@1x的圖片，前者體積大于后者，這也就造成了流量的浪費(fèi)以及影響頁面打開性能。

所以正確處理方法是針對retina屏的是否采用不同尺寸的圖片。圖片裁剪已經(jīng)在圖片服務(wù)器上實(shí)現(xiàn)。在考慮retina時(shí)也需要加上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');
    }
  }
}

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

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

html文件兼容retina

在html中本次方案準(zhǔn)備使用html5特性srcset屬性。

secset屬性的目的在于允許開發(fā)者為某個(gè)圖片的屬性指定一系列的來源，其中這些圖片的來源是要根據(jù)客戶端顯示屏的像素分辨率來設(shè)定的。

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

![]($!{newProduct.image}.300x300.png$!{isWebp})

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

html中懶加載的圖片

由于懶加載的圖片在插件中就會進(jìn)行src賦值的操作，所以直接在懶加載插件中根據(jù)window.devicePixelRatio進(jìn)行判斷修改圖片url。

/* 根據(jù)cookie返回圖片是否webp的地址 */
/* 根據(jù)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;
}

在這個(gè)方案下所有圖片的編寫都必須要帶上尺寸后綴（_num_x_num_）,在我司圖片服務(wù)器支持下還有一個(gè)特別的好處：圖片服務(wù)器會對帶有尺寸后綴的圖片進(jìn)行尺寸裁剪的同時(shí)進(jìn)行圖片壓縮，遇到不支持webp格式的瀏覽器上就會順帶對圖片進(jìn)行壓縮，盡力地減小圖片體積。

srcset屬性目前在移動(dòng)端的兼容性十分不錯(cuò)，安卓4.x版本不支持。

總結(jié)

一共兩點(diǎn)圖片流量優(yōu)化方案，一是針對webp圖片格式，二是針對retina。最后總結(jié)下來的編寫圖片代碼的情景就為3種：

1.html同步圖片編寫

![]($!{newProduct.image}.300x300.png$!{isWebp})

2.懶加載圖片編寫

![](http://upload-images.jianshu.io/upload_images/4275358-daa91c1ad126ff66.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3.less

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



webpbg(http://cdn1.showjoy.com/images/bb/bb1c8b0d275e4ba2903dc822a03add50.png);

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频

「前端」webp圖片適配流量優(yōu)化

「前端」webp圖片適配流量優(yōu)化

圖片流量優(yōu)化

webp

圖片服務(wù)器支持webp轉(zhuǎn)換

webp兼容方案

less文件中的webp兼容

html文件中的webp圖片兼容

retina兼容圖片流量優(yōu)化

less文件兼容retina

html文件兼容retina

html中懶加載的圖片

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

「前端」webp圖片適配流量優(yōu)化

圖片流量優(yōu)化

webp

圖片服務(wù)器支持webp轉(zhuǎn)換

webp兼容方案

less文件中的webp兼容

html文件中的webp圖片兼容

retina兼容圖片流量優(yōu)化

less文件兼容retina

html文件兼容retina

html中懶加載的圖片

總結(jié)

推薦閱讀更多精彩內(nèi)容

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频