x-note
Search…
webp 兼容方案
  • <picture> 标签
  • JS 替换图片的 URL
  • webp polyfill
  • webp-loader
  • 服务器处理

<picture> 标签

h5 新增的<picture>
HTML <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。 浏览器会选择最匹配的子 <source> 元素,如果没有匹配的,就选择 <img> 元素的 src 属性中的 URL。 然后,所选图像呈现在<img>元素占据的空间中。
<picture> 的常见使用场景:
  • Art direction —— 针对不同 media 条件裁剪或修改图像
  • 遇到所有浏览器都不支持的特定格式时,提供不同的图像格式
  • 通过加载最适合查看者显示的图像来节省带宽并加快页面加载时间。
<audio /><video /> 也支持指定多个源。
<picture>
<source type="image/webp" srcset="./img.webp" />
<img src="./img.jpg" alt="it is a jpg" />
</picture>
对于不支持 H5 的浏览器使用 html5shiv 做兼容
css 中 webp 不兼容

JS 替换图片的 URL

使用最小化的 webp 图片去判断浏览器是否支持 webp. 然后替换 src。
// check_webp_feature 出自 Google 官方文档
function check_webp_feature(feature, callback) {
var kTestImages = {
lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
alpha:
"UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
animation:
"UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA",
};
var img = new Image();
img.onload = function () {
var result = img.width > 0 && img.height > 0;
callback(feature, result);
};
img.onerror = function () {
callback(feature, false);
};
img.src = "data:image/webp;base64," + kTestImages[feature];
}
check_webp_feature("lossless", function (feature, support) {
if (!support) {
const $imgs = document.querySelectorAll('img[src*="webp"]');
const replaceImgSrc = (img) => img.src.replace(".webp", ".jpg");
$imgs.forEach(img, replaceImgSrc);
}
});
性能极低

webp polyfill

引入 webp-hero
引入 polyfill 本身就是一个巨大的成本

服务器处理

不支持 webp 的浏览器请求 webp 文件时,accept 中不包含 image/webp. 服务器判断不支持时返回其它格式的 image
完美兼容 CSS 与 image,需要提供额外的 webp 副本。
header /images {
Vary Accept
}
rewrite /images {
ext .png .jpeg .jpg
if {>Accept} has image/webp
to {path}.webp {path}
}
CDN 是否支持该功能?

webpack-loader

使用 multi-loader 复制文件副本 使用 webp-loader 将图片转成 webp