[!info] related notes

• 所属 MOC: nextjs-moc
• 前置概念: web-first-screen-load-optimization
• 并列概念:
• 易混淆概念:
• 关系笔记: frontend-performance-optimization-moc

Next.js Image Optimization

一句话定义

next/image 是 Next.js 对 HTML <img> 的增强组件，核心目标不是“换一个标签”，而是把响应式尺寸、图片优化、懒加载和布局稳定性纳入框架约定。

它主要解决四类问题

原始大图直接下发
→ wasted bytes

没有响应式 source selection
→ mobile 下载 desktop image

图片尺寸未知
→ load 后布局跳动（CLS）

屏幕外图片立即加载
→ 抢占首屏网络资源

Image 通过已知尺寸、生成不同候选尺寸、默认 lazy loading 等机制降低这些问题。

width / height 的真正意义

<Image
  src="/hero.png"
  width={1000}
  height={760}
  alt="Dashboard preview"
/>

这里的宽高首先用于建立图片固有宽高比，帮助浏览器在资源下载前预留布局空间，从而降低 CLS。

它不等于 CSS 最终一定显示成 1000×760。

响应式图片

页面实际显示尺寸由 CSS 决定，而图片资源选择还需要 sizes 等信息协助浏览器判断：

layout width
+ viewport
+ sizes
→ choose suitable image candidate

因此：

CSS responsive layout
≠ automatically optimal image bytes

响应式布局和响应式资源选择是两个问题。

fill

当图片尺寸由父容器决定时，可以使用 fill：

parent establishes box
→ Image fills box
→ object-fit controls crop/contain

这时父容器必须有明确的布局约束，否则图片自身无法决定合理空间。

Lazy Loading 与首屏图

默认懒加载适合屏幕外图片；真正的 LCP/首屏关键图则不应该因为 lazy loading 被推迟。

判断逻辑：

critical above-the-fold image
→ prioritize appropriately

below-the-fold image
→ lazy load

不要把“所有图片都 lazy”当作性能优化定律。

Remote Image

外部 CDN/CMS 图片通常需要显式配置允许的远程来源。原因不仅是语法限制，还包括：

• 避免任意远程 URL 被当成优化代理入口
• 控制缓存与安全边界
• 确保图片优化链路可预测

next/image 与 CDN 的关系

Image component
→ React/HTML rendering contract
→ responsive attributes / layout metadata

Image optimization service / loader / CDN
→ actual resize / format / cache delivery

两者可以协作，并不是用了 next/image 就“没有 CDN”。

什么时候普通 <img> 也合理

• 非 Next.js 管理的特殊内容
• 已有成熟图片 CDN 且自定义 loader 更合适
• 非优化路径的小型静态图标
• 特殊 SVG/浏览器行为

框架组件是默认工具，不是绝对规则。

最短记忆

next/image
= layout stability
+ responsive resource selection
+ lazy loading
+ optimization pipeline

width/height
→ aspect-ratio/layout information
≠ final CSS size

Image component
≠ image CDN itself