按需缩略图通过URL参数动态控制尺寸，后端流式处理原图并实时返回，前端用srcset或picture响应式适配，CDN缓存带参URL提升性能。
直接通过URL参数控制缩略图尺寸，是按需请求的核心方式——不存多余文件，不预生成，要多大就取多大。
用带参数的URL动态获取指定尺寸
把缩略图逻辑从“提前做一堆”变成“用时才算一次”，关键就是让请求地址本身携带尺寸意图。例如：
-
原图地址：
https://cdn.example.com/uploads/photo.jpg -
要400×300缩略图：
https://cdn.example.com/uploads/photo.jpg?width=400&height=300 -
要200×200正方形（居中裁剪）：
https://cdn.example.com/uploads/photo.jpg?width=200&height=200&crop=center
后端服务收到这类请求，实时读取原图流、解码、缩放/裁剪、编码返回，全程不落地存储中间图。
后端需支持流式处理与格式识别
不能把整张高清图加载进内存再操作，否则并发一高就崩。正确做法是：
- 从对象存储（如MinIO）以流方式拉取原图字节流
- 读前几个字节判断真实格式（跳过扩展名误导，比如.jpg实际是WebP）
- 按参数计算目标尺寸，启用高质量重采样（如Lanczos）
- 边解码边缩放边编码，输出流直通HTTP响应体
前端配合：用srcset或picture做响应式适配
避免在移动端也请求桌面尺寸图。例如：
- 用
srcset告诉浏览器不同屏幕宽度下该取哪个尺寸：<img src="photo.jpg?width=400" srcset="photo.jpg?width=800 2x, photo.jpg?width=1200 3x"> - 用
<picture>按视口条件切换：<source media="(max-width:768px)" srcset="photo.jpg?width=375">
这样浏览器自动选最匹配的URL发起请求，真正实现“按需”。
加一层缓存更稳当
相同参数的请求可能高频重复，建议在CDN或反向代理（如Nginx）上对带尺寸参数的URL开启缓存：
- 缓存键包含完整查询参数（
width、height、crop等） - 设置合理过期时间（如24小时），兼顾一致性与性能
- 原图更新时，可通过版本号或时间戳强制刷新缓存，例如：
photo.jpg?v=20260903&width=400
