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

in 技术 with 0 comment

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

但并不是所有的浏览器都支持这种图片格式,因此我们需要根据浏览器判断支持并返回正确的图片。我之前曾一直使用的又拍云是可以一键打开 WebP 自适应转换的,但阿里云这边并没有看到这样的选项,不过没关系,我们可以通过边缘脚本实现相同的功能。

OSS 添加图片 WebP 样式

打开存储桶的「数据处理」选项,按需设置需要的参数,这里以只转换成 WebP 而不调整其他参数为例。

另外可以在访问设置中设置自定义标识符,直接通过样式输出图片。

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)
}

Responses