使用Cloudflare Images + proxy-go 免費優化圖片avif webp

Cloudflare Images設定5000次/月的免費轉換


訂閱: https://www.cloudflare.com/developer-platform/products/cloudflare-images/ , 登入後左側"Images-概述", 選擇自存儲

左側"Images-轉換"啟用需要使用的網域, 這裡代表圖片原網域和線上轉換連結的根網域, 網域是需要託管在cloudflare上的

這裡就可以使用拼接連結進行圖片優化了. 例如: 你的啟用網域是https://test.com(需要啟用了cloudflare CDN, 如果根網域沒有使用Cloudflare的CDN, 用任意二級網域也可以,https://anyone.test.com) 圖片的存取網域是https://s3.test.com/666.jpg那麼可以透過以下連結存取最佳化後的圖片https://test.com/cdn-cgi/image/format=auto,metadata=none/https://s3.test.com/666.jpg 部署proxy-go 如果只需要最簡單代理, nginx應該也可以, 需要注意透傳accept並選擇合適格式並寫一下選擇合適的格式我沒用就沒研究了proxy-go部署比較適合的是大陸路由直連的國外伺服器, 這樣速度好點. 阿里騰訊的日本香港也可以按這個教程proxy-go部署方法(https://q58.org/t/topic/165) 部署專案config.json的一部分這樣寫

"MAP":{ "/s3": { "DefaultTarget": "https://s3.test.com", "ExtensionMap": { "jpg,png,jpeg,webp": "https://test.com/cdn-cgi/image/format=auto,metadata=none/https://s3 }.com" }https://s3 }...

proxy-go 綁定cdn.test.com 網域然後圖片就可以這樣存取: https://cdn.test.com/s3/666.jpg 會自動根據使用者瀏覽環境, 還有壓縮轉換後圖片大小, 來提供avif, webp, jpeg等

效果原圖:

優化後:

為什麼不是avif?

可以看到截圖裡有一句: "warning:cf-images 299 "image too large for AVIF" 因為avif更大, 所以使用了最佳文件大小, 也就是webp 如果avif或者webp都比原圖大, 那麼會使用原圖, 比如有些jpeg

比如:

並且, Cloudflare "的轉換並發非常高, 同時轉換幾十上百張圖片, 幾乎沒什麼延遲, 就非常棒. 比我二次開發的webp-server-go(https://q58.org/t/topic/134) 好用多了, 而且也不佔用伺服器資源.

唯一缺點: 每個月免費5000次, 超過了需要付費. 個人或者小公司用, 應該不會超過. 因為單一圖片獨特轉換成功後, 一個月內只算作一次, 也就是說, 5000次就代表著5000張圖片, 而不是訪問5000次.