如何在项目优雅使用webp

最新推荐文章于 2021-12-16 18:06:45 发布

weixin_33709590

最新推荐文章于 2021-12-16 18:06:45 发布

阅读量423

点赞数

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5c3efd5b6fb9a049d519c478

版权

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>
复制代码

对于不支持的浏览器要怎么处理呢，这里有两种解决方案：

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>
复制代码

在浏览器运行时判断是否支持，再用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
    }))
}
复制代码

引入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>
复制代码