webp是个伟大的发明

前言

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

webp

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

webp的优势

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

image

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

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

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

WebP的劣势

编码解码速度慢

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

浏览器的支持度不高

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

image

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

image

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

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

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

image

高度为200px且格式为webp的图片:test.webp (部分浏览器加载失败)

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

image

更多操作,可以查阅官方文档:传送门

实践

那么我们知道了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的图片处理功能来“响应式”地切换图片格式:

1
2
3
4
5
6
7
8
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优势非常明显:

image

最后

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

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