小知识,大挑战!本文正在参与“程序员必备小知识”创作活动。
webp简介
webp格式是由谷歌于2010年发布的图片文件格式,它同时支持有损压缩和无损压缩。使用webp格式可以达到JPEG的同等画质,但是大小比JPEG格式的图片小,这可以减少图片传输的大小,极大的提高了用户的体验。
JPEG只支持有损压缩
问题
安卓是支持webp格式的,ios是从ios14及macOS Big Sur才开始支持webp格式,之前的版本是不支持的。
针对ios的这种情况,我们的图片就得区分,如果支持webp就是使用webp格式的图片,如果不支持则使用其它格式(比如jpeg,jpg,png等)的图片。
那怎么来判断浏览器是否支持webp格式的图片?
方法
通过canvas来判断(这个比较常用)
/**
* 判断浏览器是否支持webp格式
* @return {[Boolean]}
*/
function isSupportWebp () {
try {
return document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') === 0
} catch (err) {
return false
}
}
创建一个canvas元素,然后把它转成image/webp
格式的data_url,如果这个data_url里面包含webp
,则代表当前浏览器支持webp
格式, 反之则不支持。
chorme:
safari(不是ios14,也不是macOS Big Sur):
官方推荐的方法
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) {
// todo
} else {
// todo
}
});
feature的值是lossy
,lossless
,alpha
,animation
中的一种,通过webp的这些特征
来加载一个WebP图片,如果能获取到图片的宽度和高度,就说明是支持WebP的,反之则不支持。