解决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);
            }
        })
    }
})
用这种方式的确能够满足要求,在支持web的情况下用webp,不支持的时候换成了jpg。(ps:我用的是阿里云的oss,默认是显示webp图片)

但是,这种方案有两个问题:

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;
}
ps:我这是tp5的代码,具体的代码根据实际情况做修改。


阅读更多
文章标签: webp
个人分类: PHP
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

解决webp格式兼容性问题

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭