"前端图片优化：AVIF、WebP、Responsive 与懒加载"

前端图片优化：AVIF、WebP、Responsive 与懒加载`<picture>` 示例<picture> <source type="image/avif" srcset="/img/hero.avif 1x, /img/[email protected] 2x"> <source type="image/webp" srcset="/img/hero.webp 1x, /img/[email protected] 2x"> <img src="/img/hero.jpg" alt="Hero" loading="lazy" srcset="/img/hero-640.jpg 640w, /img/hero-1024.jpg 1024w, /img/hero-1600.jpg 1600w" sizes="(max-width: 768px) 640px, (max-width: 1200px) 1024px, 1600px"> </picture> 策略与注意事项优先使用 AVIF/WebP，保底提供 JPEG/PNG 回退为关键首屏资源避免懒加载，次要资源使用 `loading="lazy"`合理设置 `srcset` 与 `sizes`，避免过大图与带宽浪费验证与监控使用 Performance 面板与 Web Vitals 观察 LCP/INP 改善对图片命中率与解码耗时进行抽样总结通过现代格式与响应式加载，显著降低网络负载并改善用户体验。