x-note
Search…
webp 兼容方案
<picture>标签- JS 替换图片的 URL
- webp polyfill
- webp-loader
- 服务器处理
<picture> 标签
<picture> 标签h5 新增的
<picture>HTML
<picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。 浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的 URL。 然后，所选图像呈现在<img>元素占据的空间中。<picture> 的常见使用场景：- Art direction —— 针对不同 media 条件裁剪或修改图像
- 遇到所有浏览器都不支持的特定格式时，提供不同的图像格式
- 通过加载最适合查看者显示的图像来节省带宽并加快页面加载时间。
<audio />和<video />也支持指定多个源。
1
<picture>
2
<source type="image/webp" srcset="./img.webp" />
3
<img src="./img.jpg" alt="it is a jpg" />
4
</picture>
Copied!
css 中 webp 不兼容
JS 替换图片的 URL
使用最小化的 webp 图片去判断浏览器是否支持 webp. 然后替换 src。
1
// check_webp_feature 出自 Google 官方文档
2
function check_webp_feature(feature, callback) {
3
var kTestImages = {
4
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
5
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
6
alpha:
7
"UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
8
animation:
9
"UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",
10
};
11
var img = new Image();
12
img.onload = function () {
13
var result = img.width > 0 && img.height > 0;
14
callback(feature, result);
15
};
16
img.onerror = function () {
17
callback(feature, false);
18
};
19
img.src = "data:image/webp;base64," + kTestImages[feature];
20
}
21
22
check_webp_feature("lossless", function (feature, support) {
23
if (!support) {
24
const $imgs = document.querySelectorAll('img[src*="webp"]');
25
const replaceImgSrc = (img) => img.src.replace(".webp", ".jpg");
26
$imgs.forEach(img, replaceImgSrc);
27
}
28
});
Copied!
性能极低
webp polyfill
引入 polyfill 本身就是一个巨大的成本
服务器处理
不支持 webp 的浏览器请求 webp 文件时，accept 中不包含
image/webp. 服务器判断不支持时返回其它格式的 image完美兼容 CSS 与 image，需要提供额外的 webp 副本。
1
header /images {
2
Vary Accept
3
}
4
5
rewrite /images {
6
ext .png .jpeg .jpg
7
if {>Accept} has image/webp
8
to {path}.webp {path}
9
}
Copied!
CDN 是否支持该功能？
webpack-loader
Last modified 2yr ago
Copy link