精品软件分享
duotela.com

阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式

WebP 图片格式是由 Google 基于 VP8 视频编码格式研发,其优势体现在其图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。

阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式-1

然而,由于较早版本的浏览器不支持 WebP 格式,因此现阶段还不应将全站图片转换为 WebP 格式。目前主流自适应 WebP 解决方案包括使用<picture>标签,浏览器端 js 检测替换以及 http header 识别等。部分 CDN 服务(又拍云,腾讯云等)也已经提供了自适应 WebP 图片转换功能。考虑到现有大量图片托管在阿里云 OSS 上,并通过CDN回源加速,在为了减少工作量,考虑采用 CDN 边缘脚本 + OSS 图片处理的方法实现类似功能。

阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式-2

WebP 自适应方案解决了什么问题?

使用 WebP 图片格式,显而易见,可以享受的好处就是:

1、WebP 格式的图片可以提供更好的压缩比和更小的文件大小,可以减少网络传输,使得网络传输的速度更快;

2、网络传输的流量减少了,可以节省 CDN 流量消耗,节省带宽成本;

3、当前还有一部分客户端并不支持 WebP 格式,可以通过 CDN 层去判断,对于支持的客户端,响应 WebP 格式的图片;不支持的客户端,响应原图。从而实现无缝适配。

如何判断浏览器支持 WebP 格式?

如下图所示,是通过 Chrome 浏览器开发者工具抓包显示,可以通过查看响应头和请求头相关字段,得知该图片已经被 CDN 自动转化为 WebP 格式:

阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式-3

事实上,可以通过 HTTP  Accept 头就可以判断该浏览器是否支持 WebP 格式的图片,结合上图,Chrome 浏览器在发起请求的时候,会带上 Accept 头,且其值包括:image/webp,此时就说明该浏览器支持 WebP 格式图片;参见如下格式:accept:text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,*/*;q=0.8

另外,通过 HTTP 响应头里面的 Content-Type 就可以判断文件的真正类型,例如:Content-Type:image/webp,就说明此次服务端响应的是 WebP 格式的副本图片。

首先需要在 OSS Bucket 管理功能中添加自定义图片处理规则,并在访问设置中设置自定义分割符(例如设置为感叹号 ! )。此时即可通过在 OSS 资源访问地址中追加样式尾缀(分隔符+规则名称,例如 !webp )的方法对图片进行在线处理。

阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式-4

接下来在 CDN 管理界面添加边缘脚本,根据http头判断浏览器是否支持 WebP 图片格式,如果支持则301重定向至包含包含图片处理尾缀 “!webp” 的访问路径。注意尾缀应与规则名称一致。

m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))
m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png)$')
if and(m1, m2) {
    rewrite(concat($uri, '!webp'), 'enhance_redirect', 301)
}

设置完成后可在模拟环境下测试自适应重定向是否成功(Chrome浏览器中重定向,ie中无效),并可通过浏览器开发者模式检查图片是否为 WebP 格式。

赞(2) 打赏
未经允许不得转载:多特啦 » 阿里云CDN边缘脚本实现OSS图片自适应转换为WebP格式
分享到:

观点 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏