实战项目中如何使用webp

原创
2018/01/15 17:56
阅读数 1.2K

如果说你不知道webp是什么,请google下即可。

为什么要使用webp呢?那么说下webp的优势:

  1. WebP为网络图片提供了无损和有损压缩能力,同时在有损条件下支持透明通道。并且还具有动态能力。

  2. 无损WebP相比PNG减少26%大小;有损WebP在相同的SSIM(Structural Similarity Index,结构相似性)下相比JPEG减少25%~34%的大小;有损WebP也支持透明通道,大小通常约为对应PNG的1/3。动态WebP相比GIF支持更丰富的色彩,并且也占用更小空间,更适应移动网络的动图播放。

其实综合可以概括为,支持面广,png有的能力他有,jpeg有的能力他也有,gif有的能力他还有。并且更优质,质量更小。

这么好的东西为什么不用呢?基本上兼容性是个梗,但是随着chrome的崛起这个梗将不再那么大了。当然如果你是mac平台的话,那么很不好意思不支持,如果你是Android平台的话,你可以放心使用。如果你是pcwindows平台的话你可以选择使用。为什么那就是chrome是google的,Android也是google的。

如果使用webp的话,有几张方式:

1.前端自己把图片转成webp

2.cdn支持webp 可以根据头信息返回webp或者png,jpg

3.cdn支持,前端通过js判断使用webp

第一种这个没啥可说的,有很多工具可以转,比如:gulp的一些插件,或者google提供的程序。自己google吧。

第二种这个其实是大家最想要的,但是有时候cdn没有这么智能。

第三种 这个就是说cdn其实支持生成webp的,但是需要你显示的调用,比如:https://xxxxx/88888?type=webp。那么如何判断浏览器支不支持webp呢,google官方给出了一个简洁的判断程序:

function checkWebp(feature, callback) {
        var kTestImages = {
            lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
            lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
            alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
            animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
        };
        var img = new Image();
        img.onload = function () {
            var result = (img.width > 0) && (img.height > 0);
            callback(feature, result);
        };
        img.onerror = function () {
            callback(feature, false);
        };
        img.src = "data:image/webp;base64," + kTestImages[feature];
    }

或者说你可以使用Modernizr来判断都可以。

上面这个是异步的调用起来其实也不方便,还有就是我们使用大都不需要那么多的判断,支持alpha就可以了。这样你可以更改下把这段代码放到页面顶部:

;(function CAN_WEBP() {
    window.CAN_WEBP = false;
    var alpha = "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==";
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        window.CAN_WEBP = true;
    };
    img.onerror = function () {
        window.CAN_WEBP = false;
    };
    img.src = "data:image/webp;base64," + alpha;
})()

这样你可以在需要地方通过window.CAN_WEBP来判断是否支持webp来做对应的处理。上面的方法很好但是由于是异步的判断也是会消耗时间的,我大致测试了下需要100-300ms不等,如果你觉得这个时间有点长可以试试这个技巧判断

window.CAN_WEBP = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;

 

其实现在还有能跟webp竞争的,比如:SharpP 但是浏览器都不支持这个,使用需要添加对应的支持。

说到这个,其实ios也是可以使用webp的那就是添加额外的渲染支持程序。这个你可以自行google

另外几个压缩效果好的但不被浏览器支持的图片格式:

SharpP:是国内腾讯公司SNG即通产品部音视频技术中心推出的一种图片压缩组件,现已支持iOS、Android、Windows、Linux四个平台。编码压缩率、编码耗时、解码耗时相比webP有明显的优势。不能被浏览器支持。

bpg:BPG格式,全称“Better Portable Graphics”(更好的便携式图像),它是一个声称比现时最流行的JPEG压缩格式更优秀的图像压缩方案,这种格式性能很强劲但是没有浏览器支持,需要js解码。BPG (Better Portable Graphics) 是一个新的图片格式。用来代替jpeg和webp的方案。这种格式主要有以下特点 优势:

  1. 高压缩比。在画质相同的情况下比jpeg小的多
  2. 使用一个很小的js解码器就可以被浏览器支持
  3. 基于高清视频压缩标准 (HEVC) 一个子集开发
  4. 支持和jpeg相同的色值,并且在有损压缩的通知支持透明,
  5. 单通道支持8到14位色值区域
  6. 支持有损压缩
  7. 可以添加更多的元数据编码
  8. 支持动画
  9. 相近画质前提下比webp更小

详细的可以参考http://bellard.org/bpg/ 图片画质比较 性能测试对比

 

下面都是详细介绍的文章:

WebP—维基百科: https://zh.wikipedia.org/wiki/WebP        

A new image format for the Web: https://developers.google.com/speed/webp/

Compression Techniques:https://developers.google.com/speed/webp/docs/compression

WebP的工作原理:http://www.jianshu.com/p/555859783f63

WebP原理和Android支持现状介绍:https://zhuanlan.zhihu.com/p/23648251

Common Image Formats:https://developer.akamai.com/learn/Images/common-image-formats.html

 

展开阅读全文
打赏
0
0 收藏
分享
加载中
更多评论
打赏
0 评论
0 收藏
0
分享
返回顶部
顶部