前端图片优化：AVIF/WebP与响应式图片治理

前端图片优化：AVIF/WebP与响应式图片治理概览AVIF/WebP 在压缩效率与透明度支持上优于传统格式；响应式图片避免过度传输。与缓存与优先级治理协同，保障首屏与交互体验。技术参数（已验证）`picture`：按 `type` 提供多格式源；浏览器按支持选择；提供 `img` 回退。`srcset/sizes`：为不同视口与 DPR 提供尺寸；`sizes` 描述布局占用以启发选择。编码与画质：按内容选择质量与子采样；保留关键纹理与可读性。优先级：关键图像使用 `fetchpriority="high"`；与预加载/懒加载协同。缓存与CDN：为静态与动态资源设定缓存头；避免格式协商导致的缓存碎片。实战清单为主图与图集提供 AVIF/WebP 与 JPEG 回退；统一响应式策略与占位。在构建中集成压缩与转换；监控图片体积与解码时间。将图像指标纳入性能预算与 RUM；持续迭代优化。