關(guān)于在css背景圖中引用webp圖片的疑問(wèn)

最近在做公司現(xiàn)有項(xiàng)目的優(yōu)化工作，其中一項(xiàng)就是將部分靜態(tài)資源圖從原格式轉(zhuǎn)為webp格式。從而在支持webp的瀏覽器中輸出webp格式的圖片。由于項(xiàng)目技術(shù)棧是Vue + webpack + less。原先所有的靜態(tài)資源圖基本都走webpack來(lái)進(jìn)行版本管理。如此的話，想通過(guò)webpack加上js業(yè)務(wù)邏輯代碼，實(shí)現(xiàn)webp格式的圖片瀏覽器全兼容，并沒(méi)有走通。無(wú)奈，只有將所有靜態(tài)資源圖放置在根目錄下static目錄下，此目錄中所有的圖片不走webpack處理。因此配合自己的業(yè)務(wù)代碼，可以實(shí)現(xiàn)webp全瀏覽器兼容。但如此操作，因不走webpack，所有這些圖片的版本管理也失去了。另一個(gè)問(wèn)題是css中的背景圖處理。我用less寫(xiě)了一個(gè)方法。參數(shù)為圖片路徑，從而實(shí)現(xiàn)以上的兼容效果。但我看了network面板，發(fā)現(xiàn)，雖然在支持webp的瀏覽器中輸出的是webp格式圖片，但原格式圖片也依然被載入并占用一個(gè)請(qǐng)求。如此的話，似乎css兼容就做的毫無(wú)意義了。不知有沒(méi)有更好的實(shí)踐？以下為less代碼：

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

回答

編輯回答

神經(jīng)質(zhì)

最終我還是采用了另一種方案。在根目錄的static目錄下新建一個(gè)css目錄，此目錄下保存2份css文件。分別為：picture.css(此樣式表只保存所有需要轉(zhuǎn)換為webp圖片的原始路徑)和webp.css(此樣式表只保存所有需要轉(zhuǎn)換為webp圖片的webp路徑)。然后在index.html的<script>標(biāo)簽里判斷瀏覽器是否支持webp格式，如果支持就載入webp.css，并且在localStorage里埋下webpSupport:true的屬性。否則就載入picture.css。下次進(jìn)入app，只需要判斷l(xiāng)ocalStorage下的webpSupport屬性，即可加載對(duì)應(yīng)的樣式表。此方法的缺點(diǎn)，就是需要額外保存2個(gè)樣式表文件，來(lái)分別保存原格式和webp格式的路徑。但是優(yōu)點(diǎn)是避免了用less的方法，多出了額外的圖片請(qǐng)求。以下是index.html中的業(yè)務(wù)邏輯代碼。

(function() {
    let styleTag = document.getElementById('pictureStyle')

    // 判斷是否有webpSupporta: true這個(gè)storage
    if (!localStorage.getItem('webpSupport')) {
        let image = new Image()

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

            // 圖片加載成功且寬度為1,那么就代表支持webp了,因?yàn)檫@張base64圖是webp格式.如果不支持會(huì)觸發(fā)image.error方法
            if (image.width == 1) {
                localStorage.setItem('webpSupport', true)
                styleTag.setAttribute('href', '/static/css/webp.css')
            } else {
                styleTag.setAttribute('href', '/static/css/picture.css')
            }
        }

        // 一張支持alpha透明度的webp的圖片,使用base64編碼
        image.src = 'data:image/webp;base64,UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA=='
    } else {
        styleTag.setAttribute('href', '/static/css/webp.css')
    }
}())

2017年12月16日 02:40