Webp介绍
webp是一种同时提供了有损压缩与无损压缩的图片档案格式 ,衍生自影像编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款释出。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些 PNG 文件经过其他压缩工具压缩之后,WebP 还是可以减少 28% 的文件大小。
WebP最初在2010年释出,目标是减少档案大小,但达到和JPEG格式相同的图片品质,希望能够减少图片档在网路上的传送时间。
技术
WebP使用VP8作为压缩演算法
支持
以下为CAN I USE 的数据绿色为支持的浏览器
转换工具
使用场景
当对图片大小的要求不同
)
当对图片质量要求不同
)
判断浏览器支持webp的方法
方法一:
-
function checkWebp() {
-
try{
-
return(document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0);
-
}catch(err) {
-
return false;
-
}
-
}
-
-
console.log(checkWebp()); // true or false
原理:
The HTMLCanvasElement.toDataURL() method returns a data URI containing a representation of the image in the format specified by the type parameter (defaults to PNG). The returned image is in a resolution of 96 dpi.
- If the height or width of the canvas is 0, the string "data:," is returned.
- If the requested type is not image/png, but the returned value starts with data:image/png, then the requested type is not supported.
- Chrome also supports the image/webp type.
方法二:
-
var d = document;
-
var check = function() {
-
var supportWebp;
-
try {
-
var ele = d.createElement('object');
-
ele.type = 'image/webp';
-
ele.innerHTML = '!';
-
d.body.appendChild(ele);
-
//奇妙所在,如果浏览器支持webp,那么这个object是不可见的(offsetWidth为0),
-
//否则就会显示出来,有可视宽度.
-
supportWebp = !ele.offsetWidth;
-
d.body.removeChild(ele);
-
}catch (err) {
-
supportWebp = false;
-
}
-
return supportWebp;
-
}