设计公司网站价格视频软件制作

一、方法列表

方法	解释
图片压缩	降低图片大小
图片懒加载	滚动加载：只加载用户视野范围内的图片，当用户滚动页面时再加载其他图片 按需加载：根据用户的操作预测需要加载的图片，例如在电商网站中，只加载用户正在查看的商品图片
CDN内容分发网络	将图片存储在多个地理位置不同的服务器上，用户可以从距离最近的服务器加载图片，减少延迟
缓存策略	浏览器缓存或应用缓存
优化图片格式	如WebP格式，它通常比JPEG或PNG提供更好的压缩率
分片加载	将大图片分割成多个小块，逐一请求加载
使用流式传输	渐进式JPEG：允许图片逐步加载，从模糊到清晰，给用户一种快速加载的感觉
优化图片质量	降低质量：在不显著影响视觉效果的前提下，适当降低图片的质量以减少文件大小

分片加载和流式传输有区别，分片加载是将图片分割成小块，然后按顺序加载这些图片块

流式传输是，用户会首先看到一个低质量的版本，随着数据的不断到达，图片的质量会逐渐提高。

二、原实现 —— Nginx+Minio

我目前采用的是nginx+minio的实现，局域网可以直接访问minio的图片预览链接，那么在外网的话，通过nginx转发到本地的图片预览链接也是一样的，nginx配置如下

location ^~ /preview/minio/ {rewrite ^/preview/minio/(.*) /$1 break;proxy_pass http://{minio_ip}:{minio_console_port}/;#proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_set_header X-Forwarded-Proto $scheme;proxy_redirect off;
}

但这样做有缺点，以下是缺点列表

缺点	解释
问题维度	直接转发Minio的缺陷
带宽消耗	直接返回原图，未压缩或动态调整尺寸，大图下载浪费带宽
处理能力	Minio原生不支持动态裁剪/压缩/格式转换（需依赖SDK生成缩略图，无法实时按需处理）
缓存效率	缺少多层缓存（浏览器/CDN/Nginx），重复请求原图导致流量浪费
兼容性	无法智能响应设备分辨率（如手机端仍需下载桌面级大图）
扩展性	高并发时Minio可能成为瓶颈，缺乏弹性伸缩能力

三、改进实现 —— Nginx+ImgProxy+Minio

客户端 → Nginx → 图片处理服务 → Minio → 返回处理后的图片并缓存

# imgproxy.env
# 不要使用行尾注释，行尾注释会一并被当作参数
#IMGPROXY_BIND=0.0.0.0:18080# 安全签名（推荐填！防攻击）
#IMGPROXY_KEY=your_secure_key
#IMGPROXY_SALT=your_secure_salt# Minio集成（S3协议访问）
IMGPROXY_USE_S3=true
AWS_ACCESS_KEY_ID={your_access_key}
AWS_SECRET_ACCESS_KEY={your_secret_access_key}
# Minio服务地址
IMGPROXY_S3_ENDPOINT=http://{ip}:{port}
# Minio默认region
IMGPROXY_S3_REGION={bucket_name}
# Minio地址访问风格
IMGPROXY_S3_ENDPOINT_USE_PATH_STYLE=true# 性能优化
# 并发处理数
IMGPROXY_CONCURRENCY=1024
# 客户端缓存1周
IMGPROXY_TTL=604800
# 长连接保持时间
IMGPROXY_KEEP_ALIVE=120
# 从Minio读取超时
IMGPROXY_READ_TIMEOUT=20#图片分辨率参数
IMGPROXY_QUALITY=5
IMGPROXY_FORMAT_QUALITY=jpeg=5,avif=5,webp=5
IMGPROXY_DOWNLOAD_BUFFER_SIZE=256

docker pull darthsim/imgproxy:v3.28.0docker run -d \
--name imgproxy \
--env-file /data/envfile/imgproxy.env \
-p 18080:8080 \
-v imgproxy:/data \
darthsim/imgproxy:v3.28.0

参考文章
[1] minio/S3服务增加图片处理服务imgproxy -CSDN
[2] 【商城】Minio+ImgProxy商城图片一站式处理 - CSDN
[3] 使用imgproxy来构建你的图片边缘计算服务 - 废墟
[4] nginx+imgproxy实现图片自动缩放裁剪 - 掘金
[5] An exercise with MinIO Imgproxy - Medium
[6] minio获取缩略图
[7] Processing an image - imgproxy
[8] Serving files from Amazon S3 - imgproxy
[9] 通过开发者工具-网络排查响应时间过长的问题 - CSDN