React 站点提速：先把图片修好

作者原本以为 React 性能优化 = 拆 bundle、memo 组件、追 Lighthouse 分数。然后打开 Chrome DevTools 看自己的项目：图片悄悄吃掉大部分页面重量——比 JS bundle、字体等加起来还多。笔记本上完美的主视觉，让移动用户下载多 MB 文件只为看个标题。图片优化是最快的提速方式之一。

四条规则（原文主线）

1. 别再上传巨图。 设计给 4000×3000 的图，显示在 400px 卡片里，浏览器照样下载全文件——每个像素，不管你显不显示。按实际展示尺寸匹配：移动 400px、平板 800px、桌面 1200px。用户察觉不到质量差，但一定察觉得到加载更快。

2. 用对格式：WebP / AVIF。 WebP 同视觉质量显著缩小体积（示例 JPEG 500KB → WebP ~320KB）；AVIF 压得更狠（主视觉 500KB → 近 200KB，几乎无损）。浏览器支持已经够好，能用就用。

3. 懒加载几乎免费。 自问"这张图需要立即加载吗"——画廊、博客缩略图、评价、页脚 logo 都可以等用户滚到附近再加载。React 里一个属性：<img loading="lazy" />。一条属性、更少网络流量、更快首屏。

4. 但别什么都懒加载。 Hero 主视觉例外：用户最先看到的最大元素要立即加载。Google 的 LCP（最大内容绘制）常常就是你的 hero 图——它一延迟，性能分就崩。

实践建议

• 上传管线里做尺寸裁剪（按断点 400/800/1200px），别指望浏览器缩；
• 新项目默认 WebP/AVIF，JPEG 只在兼容兜底用；
• LCP 图（hero）预加载 + fetchpriority，其余一律 lazy，别一刀切。

来源：How I Made My React Website Load Faster by Fixing Images - DEV Community