当网站中存在大量图片时，大多数场景下又不需要展示原图，这时如果不进行图片压缩，将会导致网站加载缓慢、浪费服务器流量、影响用户体验。

类似阿里云OSS、腾讯云COS等对象存储，官方会提供处理图片函数，来让图片根据url请求参数来控制返回大小、图片质量等。

今天介绍如何在自建对象存储或本地存储图片，如何解决这个问题！这里以自建Minio对象存储为图片存储服务为例演示，使用Caddy2+imgproxy+Minio实现！

各组件介绍

• Caddy2：反向代理服务，接收url请求并将链接转换为imgproxy服务可识别链接，转发给imgproxy服务处理。部署教程
• imgproxy：图片处理服务，从minio获取图片，然后处理，再返回给Caddy2。部署教程
• Minio：图片存储服务。部署教程

实现原理

实现原理与阿里云OSS类似，如原始图片链接为 https://image.4xx.me/4xx/2024/08/07/pexels-photo-346529.jpeg，这时我想返回webp格式的图片，只需这样 https://image.4xx.me/4xx/2024/08/07/pexels-photo-346529.jpeg?x=f:webp即可，更多参数可以去imgproxy官方文档查看

实现步骤

1. 各服务搭建完成

2. caddy2配置反向代理和重定向

   https://image.4xx.me {
   	import GZIP
   	import LOG "image.4xx.me"
   	import STATIC
   	tls x@xxx.xx
       @zipImg {
           expression {query.x} != '' && ({http.request.method} == "GET" || {http.request.method} == "get") && path_regexp('\\.(jpg|jpeg|png|gif|bmp|webp|avif|svg)')
       }
       handle @zipImg {
           reverse_proxy * 172.17.0.1:18666 {
               rewrite /insecure/{query.x}/plain/http://172.17.0.1:9000{path}
               header_up >Authorization "Bearer xxx"
               header_down -server
           }
   	}
       handle {
   		reverse_proxy * 172.17.0.1:9000
   	}
   }
   

   172.17.0.1:18666为 imgproxy服务地址

   http://172.17.0.1:9000为后端文件存储服务地址

   header_up >Authorization "Bearer xxx"为设置 imgproxy的访问账号密码

   Caddy服务也可换为Nginx或其他反代服务，只需按逻辑写配置就行

Halo插件适配

开源地址：https://github.com/kecikeci/halo-plugin-image-url-handler