前端图片优化（AVIF_WebP 与响应式）

概述AVIF/WebP具备更优压缩效率，结合响应式图片可按设备与视口提供合适分辨率与格式，降低体积与首屏时间。服务端应提供内容协商与缓存策略。关键实践与参数响应式: `srcset` 多尺寸与 `sizes` 媒体条件格式协商: 使用 `picture` 按支持情况降级到JPEG/PNG缓存: `Cache-Control` 与 `Vary: Accept` 保持协商缓存正确生成: 构建阶段生成AVIF/WebP与多尺寸切片示例/配置/实现<picture> <source type="image/avif" srcset="/img/hero-480.avif 480w, /img/hero-960.avif 960w, /img/hero-1440.avif 1440w"> <source type="image/webp" srcset="/img/hero-480.webp 480w, /img/hero-960.webp 960w, /img/hero-1440.webp 1440w"> <img src="/img/hero-960.jpg" srcset="/img/hero-480.jpg 480w, /img/hero-960.jpg 960w, /img/hero-1440.jpg 1440w" sizes="(max-width: 768px) 480px, (max-width: 1200px) 960px, 1440px" alt="Hero"> map $http_accept $imgfmt { default "jpg"; ~*avif "avif"; ~*webp "webp"; } location /img/ { add_header Vary Accept; try_files $uri.$imgfmt $uri =404; } 验证协商与缓存: 浏览器支持AVIF时命中AVIF资源，`Vary: Accept` 保证缓存正确响应式效果: 在不同视口下选择最合适尺寸，网络面板体积下降指标改进: Lighthouse记录 `LCP` 与总传输量减少兼容性: 不支持新格式时回退到JPEG/PNG，无破图注意事项图像生成需在构建阶段完成并与CDN缓存一致`sizes` 应反映实际布局，避免下载过大资源注意色彩与质量参数，平衡体积与效果对关键图片启用预加载与高优先级以优化首屏