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

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

Published date
Jan 7, 2021
WebP 图片格式是由 Google 基于 VP8 视频编码格式研发,其优势体现在其图像数据压缩算法,能带来更小的图片体积,而且拥有肉眼识别无差异的图像质量;同时具备了无损和有损的压缩模式、Alpha 透明以及动画的特性,在 JPEG 和 PNG 上的转化效果都相当优秀、稳定和统一。
但并不是所有的浏览器都支持这种图片格式,因此我们需要根据浏览器判断支持并返回正确的图片。我之前曾一直使用的又拍云是可以一键打开 WebP 自适应转换的,但阿里云这边并没有看到这样的选项,不过没关系,我们可以通过边缘脚本实现相同的功能。

OSS 添加图片 WebP 样式

打开存储桶的「数据处理」选项,按需设置需要的参数,这里以只转换成 WebP 而不调整其他参数为例。
notion image
另外可以在访问设置中设置自定义标识符,直接通过样式输出图片。
notion image

CDN 设置边缘脚本实现自动跳转

在 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) }
notion image