一、什么是webp，它有什么用？

WebP（發(fā)音：weppy）是一種同時(shí)提供了有損壓縮與無(wú)損壓縮（可逆壓縮）的圖片文件格式，派生自影像編碼格式VP8，被認(rèn)為是WebM多媒體格式的姊妹項(xiàng)目，是由Google在購(gòu)買On2 Technologies后發(fā)展出來(lái)，以BSD授權(quán)條款發(fā)布。

WebP支持的像素最大數(shù)量是16383x16383。有損壓縮的WebP僅支持8-bit的YUV 4:2:0格式。而無(wú)損壓縮（可逆壓縮）的WebP支持VP8L編碼與8-bit之ARGB色彩空間。又無(wú)論是有損或無(wú)損壓縮皆支持Alpha透明通道、ICC色彩配置、XMP詮釋數(shù)據(jù)。

WebP有靜態(tài)與動(dòng)態(tài)兩種模式。動(dòng)態(tài)WebP（Animated WebP）支持有損與無(wú)損壓縮、ICC色彩配置、XMP詮釋數(shù)據(jù)、Alpha透明通道。

webp是谷歌推出的一種圖片格式，它的優(yōu)點(diǎn)就是同等畫(huà)面質(zhì)量下，體積比jpg、png這些少了25%以上。

大家都知道移動(dòng)互聯(lián)網(wǎng)時(shí)代，頁(yè)面大小和用戶留存息息相關(guān)，更快的加載頁(yè)面才能讓更多用戶關(guān)注到你的內(nèi)容，而圖片一直都是頁(yè)面體積的大頭，拿我們的活動(dòng)頁(yè)面來(lái)說(shuō)，圖片占據(jù)了80%以上的頁(yè)面大小。所以使用webp的話，可以瞬間讓頁(yè)面大小下降1/4，不得不說(shuō)是一個(gè)極具性價(jià)比的優(yōu)化點(diǎn)。

當(dāng)然，它也不是沒(méi)有缺點(diǎn)，瀏覽器對(duì)于webp的解碼速度相對(duì)于jpg來(lái)說(shuō)會(huì)慢一些，不過(guò)這和體積減小帶來(lái)的性能提升，可以忽略不計(jì)了。

那么既然webp這么好，為什么沒(méi)有大范圍使用呢？歸根結(jié)底還是webp是谷歌推出的，目前主流瀏覽器只有chrome和安卓支持。不過(guò)IOS也快支持了，期待ing^ ^。在caniuse上可以查到webp目前的兼容性。

二、使用webp的常規(guī)方法以及它們的優(yōu)劣

首先，我們需要一個(gè)工具把圖片轉(zhuǎn)成webp格式，這里就使用google的官方工具即可，鏈接。

這個(gè)裝好之后，你的控制臺(tái)就有了一個(gè)cwebp命令。運(yùn)行cwebp -h，成功顯示幫助信息就表示安裝好了。

通過(guò)這個(gè)工具就可以生成webp圖片了，有了webp圖片之后，之后便是如何使用了，常見(jiàn)有兩種方案。

方案一：服務(wù)器端處理

這是最最最省心的方法了，支持webp圖片的瀏覽器在向服務(wù)器發(fā)送請(qǐng)求時(shí)，會(huì)在請(qǐng)求頭Accept中帶上image/webp。然后服務(wù)器就可以根據(jù)是否含有這個(gè)頭信息來(lái)決定是否返回webp圖片了。

這個(gè)方法只需要在web服務(wù)器那里做一些操作即可，十分簡(jiǎn)單方便。

不過(guò)這個(gè)方案缺點(diǎn)也很明顯，首先通過(guò)請(qǐng)求頭檢測(cè)，某些設(shè)備可能不太準(zhǔn)。其次，現(xiàn)在圖片等靜態(tài)資源都會(huì)放到CDN服務(wù)器上，那么在這個(gè)層面加上判斷webp的邏輯就有點(diǎn)麻煩了。

方案二：前端檢測(cè)是否支持webp然后再請(qǐng)求相應(yīng)格式的圖片

這個(gè)方法好處是十分穩(wěn)妥，通過(guò)特性檢查可以知道用戶的瀏覽器是否支持webp，壞處就是需要在業(yè)務(wù)代碼中加入檢測(cè)webp的邏輯。

通常做法是在頁(yè)面加載前先執(zhí)行一段webp的檢測(cè)，得出瀏覽器是否支持webp格式，把結(jié)果存入cookie中，在加載圖片時(shí)，如果是懶加載的圖片，那么根據(jù)是否支持webp來(lái)處理圖片路徑就好，如果不是懶加載的圖片，可以在后端渲染模板時(shí)，根據(jù)我們?cè)O(shè)置好的是否支持webp的cookie來(lái)判斷。

目前這些都是針對(duì)頁(yè)面通過(guò)img標(biāo)簽引入圖片時(shí)兼容webp的方式。如果是css中引入的圖片，方案一般就是構(gòu)建兩套css，然后在后端模板中根據(jù)cookie判斷使用哪一套，或是在css中通過(guò)選擇器覆蓋，比如對(duì)于支持webp的瀏覽器，我們?cè)趆tml根節(jié)點(diǎn)上加上webps的類名，然后針對(duì)引入的圖片，通過(guò)這個(gè)類名做選擇器優(yōu)先級(jí)覆蓋，具體的我們?cè)诘谌糠挚粗a細(xì)說(shuō)。

三、我們是如何用上webp的

重點(diǎn)來(lái)了，下面來(lái)說(shuō)說(shuō)我們對(duì)webp的實(shí)戰(zhàn)。

首先說(shuō)說(shuō)我們這邊現(xiàn)狀吧，我們的圖片有兩種存放方式。對(duì)于一些動(dòng)態(tài)圖片，比如商品圖，這些是存放在我們的圖片服務(wù)器上，這個(gè)服務(wù)器支持webp格式，只需要在圖片路徑后面加上參數(shù)t=5即可得到webp格式的圖片。

對(duì)于css引入的背景圖，我們存放在某個(gè)CDN上，這部分就麻煩了，不支持生成webp圖片，所以只能自己傳一份相應(yīng)的webp圖片上去。

而且由于各種原因和限制，我們無(wú)法采用上述說(shuō)的服務(wù)器端處理方案，所以只能采用前端代碼處理的方式。我想有些公司沒(méi)使用webp可能也是這些原因，因?yàn)榧兦岸颂幚泶_實(shí)挺繞的。

結(jié)合我們的業(yè)務(wù)情況，因?yàn)槭沁\(yùn)營(yíng)活動(dòng)頁(yè)，背景圖和商品圖基本各占一半，甚至背景圖更多，所以我們需要把css引入的圖片和img標(biāo)簽引入的圖片都做webp兼容T T。

針對(duì)img標(biāo)簽引入的圖片，由于我們的圖片服務(wù)器支持webp，而且我們的商品圖大多是懶加載，那么就簡(jiǎn)單了，直接修改我們的懶加載插件就可以實(shí)現(xiàn)，在替換真實(shí)圖片路徑的時(shí)候判斷一下是否支持webp，然后替換相應(yīng)的路徑就可以。

針對(duì)css引入的圖片，我們采取的方案是利用css的優(yōu)先級(jí)覆蓋，比如說(shuō)如果瀏覽器支持webp，那么我們給html根節(jié)點(diǎn)上加上webps的類名。這樣比如我們寫(xiě)

span{background-image:url(a.jpg)}

的時(shí)候，再寫(xiě)上

.webps span{background-image:url(a.jpg.webp)}

這樣，支持webp格式的設(shè)備就會(huì)自動(dòng)加載webp的圖片了。

當(dāng)然這里你肯定會(huì)有兩個(gè)疑問(wèn)

一是每次寫(xiě)代碼的時(shí)候加上.webps再寫(xiě)一遍工作量也太大了。

二是每張圖對(duì)應(yīng)的webp圖片是哪里來(lái)的？需要自己生成嗎？

針對(duì)這兩個(gè)問(wèn)題，我們找到了相應(yīng)的解決方法，對(duì)于問(wèn)題一我們使用css預(yù)處理器做到了生成對(duì)應(yīng)的webp的代碼。

問(wèn)題二我們使用nodejs寫(xiě)了一個(gè)腳本來(lái)監(jiān)控圖片文件夾，當(dāng)圖片增加、修改、刪除時(shí)，它便會(huì)生成或刪除對(duì)應(yīng)的webp圖片。

說(shuō)了這么多，我們一起來(lái)看一看代碼實(shí)現(xiàn)吧。

首先，我們需要在頁(yè)面最開(kāi)始的部分加入一段webp的檢查代碼。這段代碼的作用就是檢查當(dāng)前瀏覽器是否支持webp，如果支持，那么給html根節(jié)點(diǎn)加上webps的類名，以供css使用。并且在cookie中記錄一個(gè)名為webps，值為A的cookie，為期一年。這樣，之后就可以在css中使用webp類名做兼容處理，img標(biāo)簽引入的圖片也可以通過(guò)cookie得知瀏覽器是否支持webp，然后做相應(yīng)處理，后端也可以通過(guò)cookie得知設(shè)備對(duì)webp的支持情況來(lái)做一些差別渲染。

這段代碼如下，需要注意的是這段代碼要在引入css前就加載，代碼的含義可以直接看注釋。

(function(doc) {
    // 給html根節(jié)點(diǎn)加上webps類名
    function addRootTag() {
        doc.documentElement.className += " webps";
    }
    // 判斷是否有webps=A這個(gè)cookie
    if (!/(^|;\s?)webps=A/.test(document.cookie)) {
        var image = new Image();
        // 圖片加載完成時(shí)候的操作
        image.onload = function() {
            // 圖片加載成功且寬度為1，那么就代表支持webp了，因?yàn)檫@張base64圖是webp格式。如果不支持會(huì)觸發(fā)image.error方法
            if (image.width == 1) {
                // html根節(jié)點(diǎn)添加class，并且埋入cookie
                addRootTag();
                document.cookie = "webps=A; max-age=31536000; domain=58.com";
            }
        };
        // 一張支持alpha透明度的webp的圖片，使用base64編碼
        image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==';
    } else {
        addRootTag();
    }
}(document));

然后我們處理img標(biāo)簽引入的圖片，因?yàn)槲覀兊膱D片服務(wù)器支持webp，且用img引入的圖片都是通過(guò)懶加載來(lái)載入的，所以這部分我們處理起來(lái)比較簡(jiǎn)單，在懶加載替換真實(shí)路徑的時(shí)候，判斷cookie中是否存在webps=A這個(gè)cookie來(lái)決定加載的圖片的url。

當(dāng)然，如果你們不是懶加載的引入的圖片，那么可以在后端渲染的時(shí)候，通過(guò)我們寫(xiě)入的cookie，來(lái)判斷是否使用webp圖片，也很方便。這部分代碼比較簡(jiǎn)單，就不貼出來(lái)了。

然后是css中引入的圖片了，由于css不支持邏輯，我們現(xiàn)在能利用的就是html根節(jié)點(diǎn)的.webps的類名了。我們?cè)赟CSS中使用了這個(gè)mixin來(lái)加載圖片。代碼作用可以看下注釋。

/*
    通過(guò)這個(gè)函數(shù)來(lái)引入圖片，例如：
    #wrapper{ @include bg('../img/sample.jpg') }
    這段代碼經(jīng)過(guò)編譯后便會(huì)生成如下兩句代碼
    #wrapper{ background-image:url('../img/sample.jpg'); }
    .webp #wrapper{ background-image:url('../img/sample.jpg.webp'); }
 */
@mixin bg($url) {
    background-image: url($url);
    @at-root(with: all) .webps & {
        background-image: url($url + '.webp');
    }
}

如果用的是less，可以通過(guò)下面這段代碼來(lái)實(shí)現(xiàn)同樣的功能。

.mixin(@url) {
    background-image: url(@url);
    .webps & {
        background-image: url('@{url}.webp');
    }
}

最后就是如何生成webp圖片了。對(duì)于css引入的圖片，由于是放在CDN上，我們需要自己生成對(duì)應(yīng)的webp圖片。

如何做到開(kāi)發(fā)的時(shí)候自動(dòng)配套生成webp圖片呢，開(kāi)始我們想的是給我們的構(gòu)建工具寫(xiě)個(gè)插件來(lái)實(shí)現(xiàn)編譯時(shí)候生成webp圖片，然而我們發(fā)現(xiàn)由于各個(gè)項(xiàng)目使用的構(gòu)建工具可能不一樣，比如fis3、webpack還有我們自己開(kāi)發(fā)構(gòu)建工具的，太多了，針對(duì)每一個(gè)開(kāi)發(fā)成本太高。所以我們決定用nodejs寫(xiě)個(gè)小腳本，作用就是監(jiān)控我們的圖片文件夾，隨時(shí)生成配套的webp圖片，當(dāng)圖片有增加、修改、刪除時(shí)，它會(huì)相應(yīng)的增加、修改、刪除對(duì)應(yīng)的webp圖片。

工具代碼如下。默認(rèn)監(jiān)聽(tīng)images文件夾，npm install 安裝依賴之后，直接node webp-monitor.js既可。當(dāng)然，前提是你按照好了第二部分所說(shuō)的谷歌官方的webp生成工具，或者簡(jiǎn)單的說(shuō)你的終端需要有cwebp這個(gè)命令才行。

/*
    webp圖片生成
    運(yùn)行：npm install && npm start
    程序依賴谷歌官方webp轉(zhuǎn)換工具cwebp
    mac下安裝 brew install webp
    windows下可以去google官方下載
    安裝完成后運(yùn)行cwebp -h 如果顯示了使用幫助則表示安裝成功
 */
const process = require('child_process');
const fs = require('fs');
const chokidar = require('chokidar');
const log = console.log.bind(console);
const ignoreFiles = /(^\..+)|(.+[\/\\]\..+)|(.+?\.webp$)/; // 忽略文件.開(kāi)頭和.webp結(jié)尾的
let quality = 75; // webp圖片質(zhì)量，默認(rèn)75
let imgDir = 'images'; // 默認(rèn)圖片文件夾
// 得到對(duì)應(yīng)的webp格式的文件名，默認(rèn)為文件名后加上.webp
function getWebpImgName(path) {
    return `${path}.webp`;
}
// 得到shell命令
function getShellCmd(path) {
    return `cwebp -q ${quality} ${path} -o ${getWebpImgName(path)}`;
}
// 監(jiān)控文件夾
var watcher = chokidar.watch(imgDir, {
    ignored: path => {
        return ignoreFiles.test(path);
    },
    persistent: true // 保持監(jiān)聽(tīng)狀態(tài)
});
// 監(jiān)聽(tīng)增加，修改，刪除文件的事件
watcher.on('all', (event, path) => {
    switch (event) {
        case 'add':
        case 'change':
            generateWebpImg(path, (status) => {
                log('生成圖片' + getWebpImgName(path) + status);
            });
            break;
        case 'unlink':
            deleteWebpImg(getWebpImgName(path), (status) => {
                log('刪除圖片' + getWebpImgName(path) + status);
            });
            break;
        default:
            break;
    }
});
log('biubiubiu~~~ 監(jiān)控已經(jīng)啟動(dòng)');
function generateWebpImg(path, cb) {
    process.exec(getShellCmd(path), err => {
        if (err !== null) {
            cb('失敗');
            log('請(qǐng)先運(yùn)行cwebp -h命令檢查cwebp是否安裝ok。')
            log(err);
        } else {
            cb('成功');
        }
    });
}
function deleteWebpImg(path, cb) {
    fs.unlink(path, (err) => {
        if (err) {
            cb('失敗');
            log(err)
        } else {
            cb('成功');
        };
    });
}

到此這篇關(guān)于webp格式圖片介紹及用法總結(jié)的文章就介紹到這了,更多相關(guān)webp圖片格式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！

最新評(píng)論