利用阿里云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