专题 C5：图像处理
Web 图片优化完整工作流
图片优化不是单次压缩，而是一套从展示尺寸、格式策略到发布校验都可重复执行的流程。
先从展示约束出发
优化的起点不是压缩率，而是图片在真实页面里会被以多大尺寸展示。先确定容器宽度和比例，才能避免拿大图做无意义传输。
Hero、卡片、缩略图和图标的尺寸策略应该分别定义，不要把所有资产都套一个导出规则。
格式策略和发布门禁要同时存在
- 照片优先走现代有损格式，矢量和 UI 图形优先保持无损或直接用 SVG。
- 把体积上限、响应式变体和视觉抽查写进发布清单。
- 保留至少一个失败样例给 QA，确认超标图片会被拦住，而不是上线后才发现。
实用输入/输出示例
输入
Hero 图：3840x2160，5.4MB PNG 卡片图：1920x1080，1.3MB JPG
输出
Hero：导出 1920x1080 响应式变体集 卡片：压缩到 800x450，目标 <180KB