图片与视频优化（WebP/AVIF、Responsive Images、CDN 转码与自适应码率）

图片与视频优化（WebP/AVIF、Responsive Images、CDN 转码与自适应码率）概述媒体资源是页面体积与加载时长的主因之一。合理格式、响应式加载与 CDN 转码可显著降低 LCP 与带宽占用。关键实践与参数格式选择：AVIF 压缩率与主观质量更优，WebP 兼容性更广；保留 JPEG 作为回退。响应式图片：使用 `srcset`/`sizes` 与 `picture` 按 DPR/视口提供不同尺寸。设置占位尺寸（`width/height/aspect-ratio`）避免 CLS。视频：HLS/DASH 自适应码率；根据网络质量与设备性能切换。关键帧间隔与起播策略影响 INP 与首帧时间。CDN 转码：按 `Accept`/`User-Agent` 动态下发最优格式（e.g. AVIF/WebP）。实现示例<picture>

<source srcset="img.avif 1x, [email protected] 2x" type="image/avif" />

<source srcset="img.webp 1x, [email protected] 2x" type="image/webp" />

<img src="img.jpg" width="800" height="500" alt="示例图片" loading="lazy" />

</picture>

验证方法DevTools 查看实际命中格式与尺寸；统计带宽与 LCP 改善。CDN 日志分析转码命中率与回源比例。A/B 测试比较不同格式与码率对用户体验的影响。注意事项确保版权与隐私合规；对媒体元数据进行必要去除。高压缩率可能引入视觉伪影；在关键场景保留无损资源。懒加载策略需考虑首屏与可见区域，避免延迟可感知内容。