在上一篇中,为了提高网站的加载速度,我采用了 webp 的图片格式。

浏览器环境下,使用最多的图片格式有 JPEG、PNG、GIF。其中,JPEG 适合色彩复杂的图片,PNG 适合色彩单一或者需要透明的图片,GIF 通常用于动图。现有的图片格式体积较大。WebP 是一个现代的图片格式,用于在 web 上提供更好的有损和无损压缩图片。它能够在肉眼观看几乎一样的情况下,对图片体积进行大幅压缩。在将一张 1.3MB 的 JPG 有损压缩为 WebP 后,大小仅为 483KB。

显然,WebP 是个好东西!虽然很棒,但是它有一个兼容性问题!感谢 SLLiu 同学友情提醒!

友情提醒

webp兼容性

所以,为了一方面能提高网站的性能,一方面适应兼容性,我们还需要做一些东西。

我们最好是可以让 webp 自适应,在支持 webp 的浏览器上显示 webp 格式的图片,在不支持的 webp 的浏览器上显示其他格式。这里我想到的是 又拍云 ,一方面他支持 webp 的自适应,另一方面还可以做个 CDN 加速。

全站 CDN 加速

注册又拍云

你可以点击 这里进行注册 。加入 又拍云联盟 即可免费获取每月 10GB 存储空间 + 15GB CDN 流量。加入又拍云的条件就是:

logo

要在网站底部挂上又拍云的 logo 和网站 o(╯□╰)o,并且要等到周五才能审核。

注册过程很简单,注册完之后用支付宝实名认证一下,即可开始创建服务。

创建 CDN 服务

控制台

打开控制台》CDN》创建服务:

创建服务

创建好之后就来到了功能管理界面》域名绑定,把你的域名绑定到这里。

功能管理

然后复制 CNAME:

域名解析

然后回到你的域名服务商,比如我的域名是万网域名,我就打开阿里云控制台》云解析:

添加解析

解析完成后,回到又拍云控制台,然后选择 https

添加https

为自己的域名加上 https 协议,没有证书没关系,可以免费 申请 。如果你在 GitHub 或者 coding 已经设置了 https,可以取消掉。也可以直接把你已经有的域名证书复制过来,添加自有证书。

到这里就 CDN 加速就基本配置完了,其他的一些配置请自行参考哦。

设置 webp 图片自适应

首先打开成本控制》打开 webp 自适应开关

成本控制

然后在图片处理中配置间隔标识符,我选择的

图片处理

这样就完成了 webp 的自适应!当然因为有缓存机制,我们可以刷新一下。

刷新

并且清除掉你浏览器的缓存!这样我们就全部搞定了!

效果对比

我们可以简单对比一下:

我有两张图片,分别是我的背景图和我的头像:

图片

他们的大小分别是 29kb 和 194kb.

我们可以开启本地 sreve 服务看一下网络请求:

本地服务

图片格式

可以看出来没有经过任何处理的时候,显示的就是一张 png 格式图片,大小是 198kb

再看看我启用了 CDN 加速和 webp 自适应后的效果:

webp

可以看到现在他变成了一张 type 为 webp,size 为 7.2kb 的图片!

bg

这样,不但达到了我们加速博客的效果,同时也解决了兼容性的问题!