图片优化策略核心是“按需生成、就近交付、不压画质”，通过cdn边缘节点动态裁剪（锚点/中心/响应式）与智能压缩（分类型启用视觉无损、webp/avif转码、brotli、跳过小文件等），结合缓存协同与关键配置，避免双重压缩、vary头滥用和硬编码url等常见失效问题。
图片优化策略结合 CDN 动态裁剪与压缩，核心是“按需生成、就近交付、不压画质”。不是把所有图提前压小，而是让每张图在用户请求时，由 CDN 边缘节点实时判断设备尺寸、网络条件、屏幕密度，再裁剪+转码+压缩，只传它真正需要的那部分数据。
动态裁剪：精准匹配终端显示区域
避免前端或后端预生成多套尺寸图，浪费存储和管理成本。CDN 支持通过 URL 参数即时裁剪，比如：
-
锚点裁剪：
?crop=p&x=0.5&y=0.3&w=800&h=600，按比例定位主体，适合头像、商品主图等有视觉重心的场景； -
中心裁剪：直接指定宽高比（如
?crop=g&g=1:1），适配卡片式布局； - 响应式裁剪链：配合 srcset 使用，让浏览器自动选最匹配的尺寸，CDN 按参数实时出图，无需预存。
智能压缩：分资源类型启用不同策略
CDN 的压缩不是统一开 Gzip，而是识别资源类型后差异化处理：
- 图片类（JPG/PNG）：关闭源站高压缩，交由 CDN 启用视觉无损压缩 + WebP/AVIF 自动转码；
- 文本类（HTML/JS/CSS）：启用 Brotli 级别 6 压缩，支持 HTTP/2 多路复用；
- 小文件（：强制跳过压缩，防止负优化或损坏；
- 已压缩格式（WebP/AVIF）：不再二次压缩，避免质量劣化。
缓存协同：裁剪与压缩结果可复用
同一裁剪参数 + 同一压缩格式的请求，CDN 会缓存处理后的结果，后续相同请求直接返回，不重复计算。关键配置点：
- 缓存 Key 需包含所有影响输出的参数（如
crop、format、quality）； - 对静态图目录（如
/images/product/）设长缓存（7天），对带参数的裁剪图也启用缓存（但 TTL 可略短，如 24 小时）； - 禁用源站对图片的强缓存头（如
Cache-Control: no-cache），否则 CDN 无法命中。
落地避坑：三处最容易失效的配置
很多团队开了功能但没效果，问题常出在：
- 源站和 CDN 同时开启 JPEG 高强度压缩，导致双重失真；
- 未关闭源站图片的
Vary: User-Agent，使 CDN 缓存粒度过细，命中率暴跌； - 前端硬编码了固定尺寸 URL，没接入
<picture></picture>或srcset，CDN 裁剪能力完全闲置。
