Next.js/Image vs 原生 <img> —— 为什么应该使用 Image 组件？

技术
2025年12月3日
4分钟阅读

本文通过对比的方式从四个方面介绍了nextjs项目中为什么需要使用Image组件替代原生img标签

nextjs最佳实践

背景

这是我在使用 Next.js 开发项目时，最常被问到的问题：

“为什么不用原生 <img>，一定要用 Next.js 的 <Image>？”

很多人知道“这是 Next.js 的最佳实践”，但并不清楚 为什么。

这篇文章用清晰的结构 + 可复现实验带你理解：

Next.js <Image> 到底比 <img> 强在哪里？

实验驱动的对比

<img> 示例

<img src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d" />

<Image> 示例

<Image
  src="https://images.unsplash.com/photo-1503023345310-bd7c1de61c7d"
  width={500}
  height={300}
  alt="example"
/>

在 DevTools → Network → 选择 Slow 3G

然后刷新页面。

你会看到：

  • <img>：页面初始显示文字 → 图片加载后突然撑开 → 页面明显跳动（CLS）
  • <Image>：图片位置一开始就是固定框架 → 没有任何跳动

核心对比点

1、布局稳定性（CLS）

<img> 为什么会抖动？

因为浏览器不知道图片的真实尺寸，无法提前为它创建占位空间。

<Image> 为什么不会抖动？

因为：

  • 本地图片：Next.js 在构建时自动读取宽高
  • 远程图片：要求你必须提供 width/height
  • 基于尺寸生成占位框，保证布局稳定

简而言之：

项目<img><Image>
是否提前知道尺寸❌ 通常不知道✔ 本地自动、远程手动提供
是否会发生 CLS✔ 容易抖动❌ 完全避免
SEO 影响❌ CLS 影响得分✔ 符合 CWV 要求

CLS 是 Google 搜索排名中的 Core Web Vital，

这就是为什么 <Image> 能显著提升 SEO。

2、图片体积优化（自动压缩 & 多尺寸）

在 <img> 中，无论你的设备大小如何，它永远下载同一张原图。

这意味着：

  • 手机端下载 2000px 大图
  • 浪费带宽
  • 加载速率变慢
  • 性能评分降低

<Image> 在背后做了大量优化：

✔ 自动生成多尺寸（根据视口）

✔ 按设备 DPR（1x, 2x, 3x）返回最佳图

✔ 自动转换为现代格式（WebP/AVIF）

✔ CDN 层缓存优化，提高命中率

能力<img><Image>
设备尺寸优化❌ 无✔ 自动生成
格式自动转换❌ 无✔ 自动转 WebP/AVIF
多 DPR 支持❌ 无✔ 自动适配
CDN 缓存❌ 浏览器自己来✔ Next.js + CDN优化

这就是 <Image> 能让图片在不改动任何代码的前提下显著变小、加载更快的原因。

3、加载优化（懒加载 + 占位图）

<img> 默认行为：

  • 不会懒加载
  • 需要手动写：loading="lazy"
  • 不支持模糊占位图

<Image> 默认行为：

  • 自动懒加载（除非 priority=true）
  • 支持模糊占位图（blur placeholder）
  • 支持首屏图片优先加载（priority）

这是现代 Web 的最佳实践，Next.js 已帮你做好。

4、远程图片安全控制（SSRF 保护）

你可能注意到：

为什么 使用远程 URL 必须在 next.config.js 配置？

原因是：

<img> 会无条件加载任意 URL

包括：

  • 恶意链接
  • 攻击者控制的资源
  • 重定向欺骗

<Image> 不会

你必须显式声明允许的域名：

images: {
  remotePatterns: [
    {
      protocol: 'https',
      hostname: 's3.amazonaws.com',
      pathname: '/my-bucket/**'
    }
  ]
}

这能够防止 SSRF 类型攻击，让你的应用更加安全。

什么时候应该用 <img>

其实 <img> 并非完全不能用，以下场景更适合 <img>：

  1. SVG 图标（推荐 <img> 或 inline）
  • 矢量图不需要像素优化
  • 体积极小
  • 无需转换格式
  1. 小图标、favicon 之类
  • 图片很小
  • <Image> 的优化管线成本反而更高

总结

  • 避免布局抖动（关键 SEO 指标）： CLS 是 Core Web Vital，而 <Image> 自带保护。
  • 自动格式优化（WebP/AVIF）： 图片更小，加载更快。
  • 自动尺寸优化（按设备返回最佳尺寸）： 减少大量带宽消耗。
  • 自动懒加载 & 模糊占位图： 提升加载体验。
  • 远程图片域名控制： 避免 SSRF 等安全风险。
  • 更符合现代 Web 最佳实践： 让你不再手动处理繁琐而容易出错的图片细节。