利用阿里云oss圖片處理和CDN邊緣規(guī)則，將圖轉(zhuǎn)為webp格式

麒微

概述

• 采用阿里云的圖片處理，將圖片加水印、調(diào)整大小、壓縮為webp格式（無損壓縮圖片平均到原大小三分之一）
• 圖片體積大幅減少，大概能減少三分之二。
• 提升網(wǎng)站打開速度
• 節(jié)省網(wǎng)站流量成本。
• 全oss的bucket（桶）支持原圖保護(hù)
• 全oss的bucket（桶）支持水印機(jī)制
• 全oss的bucket（桶）支持圖片壓縮
• 支持如果瀏覽器不支持webp格式，自動(dòng)降級為原格式。
• 壓縮支持GIF格式  效果參考又拍云的說明 https://www.upyun.com/webp
  

需要用到的技術(shù)

• 阿里oss附件云存儲 https://addon.dismall.com/plugins/zhanmishu_storage.html  (其他友商插件也支持哦~~)
• 阿里云cdn邊緣腳本
• 阿里云圖片處理技術(shù)
  

配置方法
1、安裝上述的插件，或者其他友商oss插件。（我司插件需要關(guān)閉插件自帶的水印機(jī)制）
2、配置水印機(jī)制

3、配置圖片處理機(jī)制

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

復(fù)制代碼

最后，如果實(shí)在不會配置的，可以聯(lián)系我們幫助

• QQ  87883395
• 微信 tianlanyan