检测浏览器是否支持webp
最近在做产品的性能优化，其中一个大块是图片的优化，使用webp替代png，jpg等格式是常用的手段。由于用户手机浏览器版本不一，所以需要先检测用户浏览器是否支持webp格式。
- 使用canvas API
function isSupportWebp(){
const ele = window.document.createElement('canvas')
if (!!(ele.getContext && ele.getContext('2d'))) {
return ele.toDataURL('image/webp').indexOf('webp')>-1
}
//不支持canvas,那么一定不支持webp
return false
}- 谷歌官方推荐的方法
// check_webp_feature:
// 'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
// 'callback(feature, isSupported)' will be passed back the detection result (in an asynchronous way!)
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('lossy', function (feature, isSupported) {
if (isSupported) {
// webp is supported,
// you can cache the result here if you want
}
});
这种方法先加载一个webp格式的图片(base64字符串)，如果能获取到width和height，那么是支持webp的，否则是不支持的。
3.服务端通过http请求中的 Request Headers中的 accept值来判断，如果有 'image/webp'的话，返回webp格式的图片，否则返回png等格式。
image.png
- html5的 picture标签，会自动选择最匹配的资源加载。如果支持webp，那么会优先加载webp，否则加载img标签内src路径的资源。
<picture>
<source srcset="/path/to/image.webp" type="image/webp">
<img src="/path/to/image.jpg" alt="insert alt text here">
</picture>本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文系转载，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读