Hexo框架(十八):图片自适应webp及全站CDN加速

在上一篇中,为了提高网站的加载速度,我采用了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

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

------ 本文结束  感谢阅读 ------