關于在css背景圖中引用webp圖片的疑問

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

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

回答

編輯回答

神經質

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

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

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

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

            // 圖片加載成功且寬度為1,那么就代表支持webp了,因為這張base64圖是webp格式.如果不支持會觸發(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