关闭

解决webp格式兼容性问题

标签: webp
429人阅读 评论(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:


查看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的代码,具体的代码根据实际情况做修改。


0
0
查看评论

webP兼容性前端处理方法

上一篇 【webp简介】兼容性来自于【ISUX -Hahn 的文章 WebP 探寻之路】根据对目前国内浏览器占比与 WebP 的兼容性分析,大约有 50% 以上的国内用户可以直接体验到 WebP,如果你的网站以图片为主,或者你的产品基于 Chromium 内核,建议体验尝试。假如你打算在 App 中...
  • dong123dddd
  • dong123dddd
  • 2016-09-27 16:25
  • 4833

WebP简单介绍

WebP是一种同时提供了有损压缩与无损压缩(可逆压缩)的图片文件格式,派生自视频编码格式VP8,被认为是WebM多媒体格式的姊妹项目,是由Google在购买On2 Technologies后发展出来,以BSD授权条款发布。
  • lincifer
  • lincifer
  • 2017-04-06 21:13
  • 668

让浏览器支持Webp

Webp介绍 webp是一种同时提供了有损压缩与无损压缩的图片档案格式 ,衍生自影像编码格式VP8,是由Google在购买On2 Technologies后发展出来,以BSD授权条款释出。根据 Google 的测试,无损压缩后的 WebP 比 PNG 文件少了 45% 的文件大小,即使这些...
  • JASMINECJC
  • JASMINECJC
  • 2016-05-26 19:34
  • 4710

让你的页面支持WebP图像!

原文链接:http://bbs.csdn.net/topics/370172422 WebP格式   WebP是Google推出的一种图片格式,它基于VP8编码,可对图像大幅压缩。与JPEG相同,WebP也是一种有损压缩,但在画质相同的情况下,WebP格式比JPEG图像小40%。 Wik...
  • u013063153
  • u013063153
  • 2016-09-26 20:19
  • 6610

Android兼容性问题 -- WebP格式图片解码失败

WebP图片格式WebP是Google在2010推出的一种图片格式,此图片格式是从Android4.0版本开始支持的,但是对包含透明和无损压缩的WebP格式是从Android4.2才开始支持,此外还有部分特殊的机型不支持任何WebP格式的解码。
  • ccpat
  • ccpat
  • 2015-11-30 18:39
  • 6480

html 使用 Jquery 懒加载 与 webp 整合优化

程序猿日常快过年了! 使用方法 https://github.com/wugemu/lz.js.git引入jquery.lazyload.lz.js 例如:<img src="occupying270.png" data-original="4304485231...
  • langlinsen516
  • langlinsen516
  • 2017-01-11 14:54
  • 629

WEBP

WEBP是什么呢? WEBP 是google推出的意图改变web图片JPG、PNG、GIF三分天下局势的一种图片格式。它不仅支持无损或有损压缩、alpha通道,还支持动画演示。在同画质的情况下,webp格式图片占用体积相较于jpg图片大约减少40%,相较于无损png图片大约减少30%。具...
  • xcysuccess3
  • xcysuccess3
  • 2014-08-26 11:54
  • 12492

Android端 WebP图片压缩与传输的一点探索

1. 简介 直到4g时代,流量依然是宝贵的东西。而移动网络传输中,最占流量的一种载体:图片,成为了我们移动开发者不得不关注的一个问题。 我们关注的问题,无非是图片体积和质量如何达到一个比较和谐的平衡,希望得到质量不错的图片同时体积还不能太大。 走在时代前列的谷歌给出了一个不错的答案—...
  • a405942873
  • a405942873
  • 2016-05-25 16:33
  • 5316

一个新的图像格式 -- webp介绍

简介WebP是google开发的一种旨在加快图片加载速度的图片格式。图片压缩体积大约只有JPEG的2/3,并能节省大量的服务器带宽资源和数据空间。是现代图像格式,提供了优越的无损和有损压缩的图片在网络上。使用WebP,网站管理员和web开发人员可以创建更小、更丰富的图像,使网页更快。 WebP无损的...
  • dong123dddd
  • dong123dddd
  • 2016-08-18 10:14
  • 1910

两种新型的图片格式 : SVG和WebP的比较

两者的优点 SVG尺寸小, 压缩性强; 矢量图片; XML编写; 图片内文字支持搜索, Web端适用; WebP精细度不降低的前提下缩小图片体积; 适用范围 SVG Web端: IE9开始兼容; Android: 安卓3.X开始局部支持; IOS: Safari简单支持, 复杂滤镜不可行;...
  • j550341130
  • j550341130
  • 2017-01-11 22:04
  • 1340
    个人资料
    • 访问:11114次
    • 积分:225
    • 等级:
    • 排名:千里之外
    • 原创:11篇
    • 转载:1篇
    • 译文:0篇
    • 评论:2条
    文章分类
    最新评论