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

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

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

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

新建OSS图片处理自定义样式

接下来在 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 格式。

Tagged with: , , , , , , ,
Comments (2)
  • WH 4月 17, 2020

    感谢分享~
    之前一直为 aliyun 不支持自适应 webp 纠结要不要换成 Upyun

  • bh 10月 25, 2023

    感谢分享

Add Your Comment

* required

This is a unique website which will require a more modern browser to work!

Please upgrade today!