前端性能优化——使用webp来优化你的图片xx

webp是个伟大的发明

前言

我理解的性能优化第一个是网页加载的快，第二个是网页运行的快。第一个其实做到并不复杂，只需要注意文件的大小、加载速度、文件整合。目前网页上的图片资源依旧是流量的大头，当页面的图片有很多的时候，尤其要注意加载的速度，我们可以将图片尽量压缩，将图片放到CDN上，也可以使用懒加载来分批加载图片，但是考虑完这些后，是否还有对此的提升空间？

webp

WebP是一种支持有损压缩和无损压缩的图片文件格式，根据Google的测试，无损压缩后的WebP比PNG文件少了26％的体积，有损压缩后的WebP图片相比于等效质量指标的JPEG图片减少了25％~34%的体积。

webp的优势

下面我们以一张图片为例，分别用不同质量进行压缩。

我们可以明显的看到，WebP格式的图片，保持原始的质量，比jpg格式的体积要少一半，当退而求其次时，甚至能达到十分之一体积的程度，所以他具有一下优点：

更小的文件尺寸
更高的质量——与其他相同大小不同格式的压缩图像比较
同时webp具备现有图片格式的一些特点，比如：png支持透明，gif动态图，webp也同样支持

目标图像的质量和文件大小之间存在明显的折中关系。在很多情况下，可以很大程度降低图像的大小，而用户却几乎不会注意到其中的差别，相对来说，当没有非常极致的观赏需求，更快地让用户看到图片是个不错的选择。

WebP的劣势

编码解码速度慢

目前WebP与JPG相比较，编码速度慢10倍，解码速度慢1.5倍，在编码方面，一般来说，我们可以在图片上传时生成一份WebP图片或者在第一次访问JPG图片时生成WebP图片，对用户体验的影响基本忽略不计，而1.5倍的解码数度，相比于下载图片的时间，基本可以忽略。所以，并不算是一个很大的劣势。

浏览器的支持度不高

如果一项技术兼容性达不到90%以上，是很难被普遍利用的，现在是2018年8月份，WebP的支持度如下：

WebP是谷歌家的技术，理所当然被全部支持，然鹅对于其他浏览器，只能找替代方式了，下文将会介绍替代方案。

转换WebP

原始方式

最原始的方式就是寻找将其他格式图片转换为WebP格式图片，然后再上传到CDN上，这样在图片数量小还能接受，当需要处理大量图片时，就需要更先进的方式。

传送门：转换WebP

配合阿里云CDN

强大的云服务给我们开发带来了很多便利，阿里云OSS给我们提供的图片处理功能非常强大，简单来说，就是我们随意上传什么格式的图片，当我们想要这张图片的WebP格式的时候，只需要在url带上相应的参数即可。

下图是我上传到阿里云OSS上的图片，他原始格式的png的，也就是原始url为：”http://vinceimage.oss-cn-beijing.aliyuncs.com/test.png"，这个时候，我们可以根据阿里云文档来灵活地给url配置各种参数，由此获得各种格式、尺寸、质量的图片。

原图：test.png

url: http://vinceimage.oss-cn-beijing.aliyuncs.com/test.png

假设我们想要这张照片的高度为200px，这个时候不需要我们去裁剪图片，而是直接在原url上配置参数：

高度为200px的图片: test.png

url:http://vinceimage.oss-cn-beijing.aliyuncs.com/test.png?x-oss-process=image/resize,h_200

高度为200px且格式为webp的图片：test.webp （部分浏览器加载失败）

url: http://vinceimage.oss-cn-beijing.aliyuncs.com/test.png?x-oss-process=image/resize,h_200/format,webp

更多操作，可以查阅官方文档：传送门

实践

那么我们知道了webp的好处，但是是否能用在html里面呢？是否会担心他的兼容性，假设浏览器不支持webp，那岂不是全站的图片都挂了？当然不需要担心，我们只需要为那些支持webp的浏览器提供webp格式的图片，其他浏览器则用原始的图片。

判断浏览器是否支持webp

我们可以直接用一段代码能够判断是否支持webp：

1
2
3

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

console.log(isSupportWebp);   // true or false

来自：张鑫旭

配合阿里云OSS来响应式切换图片格式

那么判断出浏览器是否支持webp，我们就能用阿里云OSS的图片处理功能来“响应式”地切换图片格式：

render() {
    const isSupportWebp = !![].map && document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') == 0;
    return(
        <div>
            <img src={`http://vinceimage.oss-cn-beijing.aliyuncs.com/test.png?x-oss-process=image/resize,h_200/${isSupportWebp ? 'format,webp':''}`} alt=""/>
        </div>
    )
}

三种不同浏览器加载同一张图片，我们可以看到，webp的size优势非常明显：

最后

webp如今已经在很多网站都被使用，减少的文件大小不仅带来更好的用户体验，还能减少企业支付OSS的流量费用，何乐不为呢～

It is not easy to meet each other in such a big world. :)

文章目录

前言