如何在項目優雅使用webp

webp在項目中使用的好處就不在這裏多說了， chrome性能優化指南上有詳情的介紹。下面主要說下如何在項目中落地。

picture

使用picture標籤，這個是html5新加的標籤，瀏覽器支持狀況，能夠見caniuse

下面是具體的引用，picture標籤下有一個source，眼熟的可能想到了video標籤下也有一個source標籤， source的srcset用來標註圖片連接，type爲圖片類型（瀏覽器根據type類型判斷支不支持此類型，從而決定是否加載）， 從第1個source開始判斷，img元素兜底。

img元素兜底時，lazy-load也是能夠正常使用的,自身的class也不受影響。

<picture>
    <source srcset="teal.png!750.webp" type="image/webp">
    <img src="teal.png" data-original="" class="" />
</picture>
複製代碼

對於不支持的瀏覽器要怎麼處理呢，這裏有兩種解決方案：

1. html結構不動， 對於不支持picture的瀏覽器，picture標籤並不解析，img與picture同級。因此css裏設置的善於picture的選擇器將無效。故這種方式適合img樣式結構簡單的地方。同時因爲不支持picture，故source裏的2x/3x，響應式也就用不了，只是簡單的src fallback。

IE8下的結構,能夠看到picture並無被正確解析:

<picture>
<source srcset="teal.png!750.webp" type="image/webp">
<img src="teal.png" />
<picture>
複製代碼

2. 在瀏覽器運行時判斷是否支持，再用JS去替換圖片格式

/** * 檢測user-agent是否支持webp圖片 * @return thenable function */
const checkWebp = function () {
    return new Promise(((resolve) => {
        const img = new Image()
        const dataUri = 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA'
        img.onload = function () {
            const result = (img.width > 0) && (img.height > 0)
            resolve(result)
        }
        img.onerror = function () {
            resolve(false)
        }
        img.src = dataUri
    }))
}
複製代碼

3. 引入JS polyfill腳本picturefill來支持picture原生功能,包括上面提到的響應式支持(media/2x/3x等)

<picture>
    <source srcset="teal.png!750.webp" type="image/webp" media="(min-width: 768px)">
    <source srcset="teal.png!750.webp 2x" type="image/webp">
    <img src="teal.png" />
</picture>
複製代碼

---

擴展閱讀：

css-tricks.com/using-webp-…