解决webp格式兼容性问题

墨蓝 2022-06-08 14:48 694阅读 0赞

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：

![Center][]

查看ie的accept：

![Center 1][]

可以知道，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的代码，具体的代码根据实际情况做修改。

[Center]: /images/20220608/5d41cee7de5542ea87c7e15fa4eeb700.png
[Center 1]: /images/20220608/590197ee1c484f608dd362716fc0abd0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，694人围观）

还没有评论，来说两句吧...

相关阅读

相关解决web页面浏览器兼容性问题

浏览器兼容性问题是每个做web页面常常遇到的问题，而且还不得不解决的问题。造成这种局面的主要原因就是各大公司都推出自己的浏览器，而他们在某些方面的规范还不一样。我们现在常

以你之姓@/ 2024年02月17日 15:43/ 0 赞/ 53 阅读

相关如何解决跨浏览器兼容性问题？

聚沙成塔·每天进步一点点 ⭐ 专栏简介 ⭐ 解决跨浏览器兼容性问题 ⭐ 写在最后 -------------------- ⭐ 专栏简介前端

小灰灰/ 2023年10月16日 14:38/ 0 赞/ 3 阅读

相关移动端兼容性问题解决方案

移动端兼容性问题解决方案参考文章： [（1）移动端兼容性问题解决方案][1] （2）https://www.cnblogs.com/biglion/p/5985546.

川长思鸟来/ 2022年08月28日 04:53/ 0 赞/ 260 阅读

相关常见兼容性问题

png24位的图片在iE6浏览器上出现背景，解决方案是做成PNG8.也可以引用一段脚本处理. 浏览器默认的margin和padding不同。解决方

野性酷女/ 2022年07月15日 08:46/ 0 赞/ 327 阅读

相关 promise兼容性问题

promise兼容性如下表所示，可以看出对安卓的兼容性并不好。 ![Center][] 项目中发现，在安卓4.4.4及以上的手机不支持axios的

缺乏、安全感/ 2022年06月09日 08:42/ 0 赞/ 681 阅读

相关解决webp格式兼容性问题

webp格式的图片非常屌，见文章：https://yq.aliyun.com/articles/63830 可是，它有兼容性问题，目前我发现只有基于webkit内核的浏览器才

墨蓝/ 2022年06月08日 14:48/ 0 赞/ 695 阅读

相关浏览器兼容性问题

一、常见兼容性问题 1.双倍浮动bug 描述：块元素设置了float后，又设置了横向的margin值，在IE6下显示的margin值比设置的值要大，并且是2倍关系.

╰半橙微兮°/ 2022年03月27日 09:12/ 0 赞/ 440 阅读

相关浏览器兼容性问题和解决方案

简述所谓的浏览器兼容性问题，是指因为不同的浏览器对同一段代码有不同的解析，造成页面显示效果不统一的情况。常见的浏览器内核（渲染引擎）四种内核

- 日理万妓/ 2021年09月19日 21:22/ 0 赞/ 439 阅读

相关 IE兼容性问题

一 css hack：目的是是你的css代码兼容不同的浏览器（书写顺序：一般将使用范围广，被识别能力强的css的前面）

本是古典何须时尚/ 2021年09月14日 07:50/ 0 赞/ 605 阅读

相关浏览器兼容性问题

1，浏览器兼容问题一：不同浏览器的标签默认的margin和padding不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大

- 日理万妓/ 2021年08月29日 22:17/ 0 赞/ 577 阅读