Jamers Posted December 12, 2017 Report Share Posted December 12, 2017 webp是Google 2010年推出的新图像格式,到目前为止也只有Google自己支持。它的优势也非常明显。 PNG 转 WebP 的压缩率要高于 PNG 原图压缩率,同样支持有损与无损压缩转换后的 WebP 体积大幅减少,图片质量也得到保障(同时肉眼几乎无法看出差异)转换后的 WebP 支持 Alpha 透明和 24-bit 颜色数,不存在 PNG8 色彩不够丰富和在浏览器中可能会出现毛边的问题 作者:知乎用户链接:https://www.zhihu.com/question/27201061/answer/35637827来源:知乎 科技博客 GigaOM 曾报道:YouTube 的视频略缩图采用 WebP 格式后,网页加载速度提升了 10%;谷歌的 Chrome 网上应用商店采用 WebP 格式图片后,每天可以节省几 TB 的带宽,页面平均加载时间大约减少 1/3;Google+ 移动应用采用 WebP 图片格式后,每天节省了 50TB 数据存储空间。 作者:知乎用户链接:https://www.zhihu.com/question/27201061/answer/35637827来源:知乎 目前只有一半左右的浏览器支持,我们想使用这个图片格式还是得费一番功夫,首先判断浏览器是否支持这个格式,如果支持直接使用webp,如果不支持使用传统的图片格式。 判断方式有两种方式:一、通过浏览器请求头进行判断,Accept 中是否包含 image/webp ,如果包含就是支持,否则就是不支持,这里切换文件也相对比较方便,即使客户端关闭JS也不会有影响,推荐使用此模式进行处理。二、用JS进行前端判断,然后前端用js切换图片。 alert(support.webp2);即可 /** * 检测浏览器是否支持webp格式(异步方式) * @param callback */ var support = {}; checkWebpAsync = function(callback) { if (support.webp2 === undefined) { var img = new Image(); var tid = setTimeout(function(){ support.webp2 = false; callback && callback(support.webp2,true); img.onload = img.onerror = null; img = null; },500); img.onload = img.onerror = function() { clearTimeout(tid); support.webp2 = img.width === 2 && img.height === 2; callback && callback(support.webp2,false); }; img.src = "data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/oPP8bA//LwYAAA"; }else{ callback && callback(support.webp2); } } checkWebpAsync(); Link to comment Share on other sites More sharing options...
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now