如何在项目优雅使用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-…