如何借助又拍云实现 webp/ jpg& png 动态请求?【学习笔记】

webp作为新生代的一种图片格式,它的小巧细节保留度极高的特性深受广大网站长的喜欢。但是,作为新生格式的同时,各大浏览器对它的兼容度也是参差不齐。例如Chrome对webp的支持就不错,但是Safari就截止到最新一代浏览器还!是不支持。怎么借助又拍云的边缘规则来让我们的网站对用户对浏览器动态适配实现访问体验最优化?

说在前面,在又拍云CDN功能的成本控制选项卡下有一个“Webp自适应”的选项。实际上我的博客一直都有开启这个功能,但是怎么都不能正常的工作自适应使用Webp。所以这个笔记可以说是另一种强行动态适应的方案,可以一试。

回到正文。一切的前提是你在使用又拍云的加速服务。然后,打开你的网站所使用的cdn,进入”边缘规则“选项卡中,“添加规则”。

如图,其他东西你自己看着填就好了。我们讲重点。

条件判断:我们添加一条规则:我们通过HTTP的Accept头来判断浏览器是否支持webp(实际上,这也是又拍云自带的Webp自适应功能的方法,不过我们这里更加强制,所以执行力更高。)

HTTP请求头  Accept    正则匹配(不区分大小写)    webp

然后功能选择:URL改写;

URL字符串提取: ^/*.jpg

改写规则:/*.webp

别忘了规则状态为:启用。

保存,这样我们就启用了jpg改写为webp。png同理,请你自己来试一下。

答案(选中查看):

HTTP请求头  Accept    正则匹配(不区分大小写)    webp

然后功能选择:URL改写;

URL字符串提取: ^/*.png

改写规则:/*.webp

如果以后你还有其他的改写,例如mp4转webm这一类,也可以如法炮制,用这样的方法来强制改写。当然,HTTP头的匹配就要根据情况来改,这尚且是后话。

最后,打开你的chrome,F12,Network,找到你的图片,现在看看它的类型(文件格式显示的还会是jpg一类,别担心,要看它的文件类型,不要单看后缀)

这样,就完成了。

发表评论

电子邮件地址不会被公开。 必填项已用*标注

*

code