解决webp格式兼容性问题

webp格式的图片非常屌，见文章：https://yq.aliyun.com/articles/63830

可是，它有兼容性问题，目前我发现只有基于webkit内核的浏览器才支持，如果ie内核的浏览器打开，根本不会显示webp格式的图片。

那么如何解决这个问题呢？

首先，我想到的是用js判断是否支持webp格式图片，支持的就用webp，不支持的用原图。上代码：

function checkWebp() {
    try{
        return (document.createElement(canvas).toDataURL(image/webp).indexOf(data:image/webp) == 0);
    }catch(err) {
        return  false;
    }
}

$(document).ready(function() {
    var webp_good = checkWebp();

    if(webp_good == false) {
        $(img).each(function() {
            var src = $(this).attr(src);
            if(typeof src != undefined) {
                src = src.replace(/format,webp, /format,jpg);   //将webp格式转换成jpg格式
                $(this).attr(src, src);
            }

            var original = $(this).attr(original);		//针对用了懒加载的情况
            if(typeof original != undefined) {
                original = original.replace(/format,webp, /format,jpg);   //将webp格式转换成jpg格式
                $(this).attr(original, original);
            }
        })
    }
})

但是，这种方案有两个问题：

1）IE下页面首先会显示一张破图，然后再显示成正确的图，体验效果不好

2）IE下虽然讲webp图片替换成了jpg，但是看网络请求可以发现，其实页面请求了两次，先请求了webp，再请求了jpg，反而浪费了宽带

果断抛弃这种方案。

方案二，根据header信息判断浏览器是否支持webp

accept头信息会告知浏览器能够识别哪些类型的文件，如下

查看google的accept：

查看ie的accept：

可以知道，google浏览器是支持webp的，ie不支持。

所以，可以在服务器端通过判断是否支持webp来显示对应的图片。

function get_thumb($url, $type = , $width = 0, $height = 0, $format = webp)
{
    //oss图片
    if(strpos($url, http://static.jutubao.com) !== false || strpos($url, http://img.jutubao.com) !== false) {
        //判断客户端是否支持webp，不支持则改为jpg格式
        $accept = request()->header(accept);
        if(strpos($accept, image/webp) === false && $format == webp) {
            $format = jpg;
        }

        if(empty($width) && empty($height) && empty($type)) {   //更改图片格式
            $url .= ?x-oss-process=image/format,.$format;
        } else {
            $url .= ?x-oss-process=image/resize,m_.$type.,h_.$height.,w_.$width./format,.$format;
        }
    }

    return $url;
}