利用阿里云oss图片处理和CDN边缘规则，将图转为webp格式

麒微

概述

• 采用阿里云的图片处理，将图片加水印、调整大小、压缩为webp格式（无损压缩图片平均到原大小三分之一）
• 图片体积大幅减少，大概能减少三分之二。
• 提升网站打开速度
• 节省网站流量成本。
• 全oss的bucket（桶）支持原图保护
• 全oss的bucket（桶）支持水印机制
• 全oss的bucket（桶）支持图片压缩
• 支持如果浏览器不支持webp格式，自动降级为原格式。
• 压缩支持GIF格式  效果参考又拍云的说明 https://www.upyun.com/webp
  

需要用到的技术

• 阿里oss附件云存储 https://addon.dismall.com/plugins/zhanmishu_storage.html  (其他友商插件也支持哦~~)
• 阿里云cdn边缘脚本
• 阿里云图片处理技术
  

配置方法
1、安装上述的插件，或者其他友商oss插件。（我司插件需要关闭插件自带的水印机制）
2、配置水印机制

3、配置图片处理机制

5、配置边缘脚本

1. m1 = and($http_accept, match_re($http_accept, '.*image\/webp.*'))
   
2. m2 = match_re($uri, '.+(.JPEG|.jpeg|.JPG|.jpg|.PNG|.png|gif|GIF)(\?.*)?)
   
3. if and(m1, m2) {
   
4.     rewrite(concat($uri, '/webp?', $args), 'enhance_break', 301)
   
5. }
   
6. if and(m2, not(m1)) {
   
7.     rewrite(concat($uri, '/safe?', $args), 'enhance_break', 301)
   
8. }
   

复制代码

最后，如果实在不会配置的，可以联系我们帮助

• QQ  87883395
• 微信 tianlanyan