实战项目中如何使用webp

最新推荐文章于 2024-05-31 09:57:33 发布

weixin_34295316

最新推荐文章于 2024-05-31 09:57:33 发布

阅读量1.4k

点赞数

文章标签：游戏 javascript 前端 ViewUI

原文链接：https://my.oschina.net/ihh/blog/1607440

版权

为什么80%的码农都做不了架构师？>>>

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

为什么要使用webp呢？那么说下webp的优势：

WebP为网络图片提供了无损和有损压缩能力，同时在有损条件下支持透明通道。并且还具有动态能力。
无损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的方案。这种格式主要有以下特点优势：