办法一：通过获取浏览器的 navigator.userAgent 来判断浏览器是否反对 webp 格局的图片；
// 通过获取浏览器的 navigator.userAgent 来判断浏览器是否反对 webp 格局的图片；// 该函数办法的缺点是，如果用户批改了 navigator.userAgent 会导致判断呈现不精确；function browser_check_webp( ) { // 获得浏览器的 userAgent 字符串； var userAgent = navigator.userAgent; // 判断是否为 IE 版本小于 11 的浏览器； var isIE = userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1; // 判断是否为 IE11 浏览器； var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf("rv:11.0") > -1; if( isIE || isIE11 ) { // IE 浏览器，不反对 webp 格局的图片； return false; }else{ // 非 IE 浏览器，反对 webp 格局的图片； return true; }}办法二：通过浏览器加载一个 WebP 图片，如果能获取到图片的宽度和高度，就阐明是反对 WebP 的，反之则不反对；
参考文档：
判断浏览器是否反对WebP图片：https://blog.csdn.net/jesslu/...
判断浏览器是否反对webp：https://www.cnblogs.com/onthe...
让浏览器反对Webp：https://segmentfault.com/a/11...
WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)：http://webpjs.appspot.com/
浏览器反对webp格局：应用插件：http://www.etherdream.com/Web...
JavaScript动静加载脚本和款式(23)：https://www.cnblogs.com/yizih...
让你的页面反对WebP图像！：https://blog.csdn.net/u013063...
WebP.js Polyfill ：https://github.com/obartra/we...
webp图片优化：https://www.cnblogs.com/pingf...
// 参数 img_path 为筹备加载的尺寸不为零的 webp 图片的存储门路；function browser_check_webp( img_path ) { var isWebP = false ; var img_checkWebP = new Image(); img_checkWebP.src = img_path; // onload 事件在图片胜利加载实现后立刻执行； img_checkWebP.onload = function(){ // 如果能获取到图片的宽度和高度，就阐明是反对浏览器 WebP ，反之则不反对。 isWebP = !!( img_checkWebP.height>0 && img_checkWebP.width>0 ) ; if ( isWebP ) { return true; } else { return false; } }; // 如果浏览器不反对 webp 图片，图片加载失败，那么触发 onerror 办法 ； img_checkWebP.onerror = function(){ return false; };}办法三：通过浏览器响应头和申请头，查看其 Accept 里是否含有 image/webp 字段，判断是否反对 WebP 图片格式；
参考文档：
判断浏览器是否反对WebP图片：https://blog.csdn.net/jesslu/...
判断浏览器是否反对webp：https://www.cnblogs.com/onthe...
让浏览器反对Webp：https://segmentfault.com/a/11...
WebPJS - Google's new image format WebP for not supported browsers (with alpha-channel)：http://webpjs.appspot.com/
浏览器反对webp格局：应用插件：http://www.etherdream.com/Web...
JavaScript动静加载脚本和款式(23)：https://www.cnblogs.com/yizih...
让你的页面反对WebP图像！：https://blog.csdn.net/u013063...
WebP.js Polyfill ：https://github.com/obartra/we...
webp图片优化：https://www.cnblogs.com/pingf...
// 通过 Chrome 浏览器开发者工具抓包显示，能够通过查看响应头和申请头相干字段；// 判断其 Accept 里是否含有 image/webp 字段，如果蕴含则阐明反对 WebP ，反之则不反对。// 函数返回 true 或 false ；true 为反对 ，false 不反对 ；function browser_check_webp( ) { try{ // !![].map 次要是判断浏览器是否为 IE9+ ，免得 toDataURL 办法会挂掉； // 如果你间接对数组原型扩大了 map 办法，则须要应用 !![].map 以外的办法进行判断 ，例如 !!window.addEventListener 等； return ( !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0 ); }catch( err ) { return false; }}总结
理论应用的时候，倡议只抉择其中一种办法应用就行了，以防止多种办法独特应用导致可能呈现未知出错。