图片常占页面大半流量。现代格式 + 响应式 + 尺寸声明，能砍掉一大截加载时间。

实践流程

<picture>
  <source srcset="hero.avif" type="image/avif">
  <source srcset="hero.webp" type="image/webp">
  <img src="hero.jpg" alt="首页主图" width="1200" height="630" loading="lazy">
</picture>

要点速览

  • avif/webp 比 jpg 小很多，picture 做渐进兼容。
  • 写死 width/height 防布局抖动。
  • 首屏外图片 loading=lazy 延后加载。
图片优化三招：换格式、定尺寸、懒加载。