如何在项目优雅使用webp

用户2845596

发布于 2021-01-21 15:11:52

1K0

发布于 2021-01-21 15:11:52

文章被收录于专栏：劝学劝学

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

扩展阅读：

css-tricks.com/using-webp-…

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

如有侵权请联系 cloudcommunity@tencent.com 删除

css