Next.js 图片优化完全攻略：Image 组件的正确用法

Lighthouse测试分数：62分。

看到这个数字,我盯着屏幕愣了好几秒。花了两周时间做的Next.js项目，性能评分居然才刚及格。点开Performance一看，最大的问题直接摆在那里——LCP（Largest Contentful Paint）4.8秒，全是图片拖的后腿。

说实话，当时我就懵了。明明已经用了Next.js，不是说框架自带优化吗？结果一看代码，首页那张大Hero图，我还在用最原始的<img>标签。电商列表页几十张商品图，全都是直接从服务器拉的原图，一张就3-4MB。

后来我才知道，Next.js虽然强大，但图片优化得你主动用它的Image组件才行。用对了，真的能让你的图片体积直接减少60-80%，LCP从4秒降到2秒以内。

问题是，很多人跟我一样，用了Image组件还是各种踩坑。远程图片报”Un-configured Host”错误，页面加载时图片区域一跳一跳的，配置项一大堆不知道该怎么用。这篇文章，我就把自己踩过的坑和解决方案全部整理出来，从零开始教你正确使用Next.js Image组件。

为什么要用 Next.js Image 组件？

普通 img 标签的三大坑

你可能会想，图片不就是一个<img src="xxx">的事儿吗？我一开始也这么想。直到性能测试的时候，才发现问题大了。

第一个坑：格式不优化，白白浪费带宽

普通img标签，你给它什么格式它就显示什么格式。你上传的是3MB的PNG，用户下载的就是3MB。现在的浏览器基本都支持WebP，体积能比JPEG小30%，支持AVIF的浏览器更能再省40%。但img标签不会管这些，它只会老老实实加载你指定的文件。

第二个坑：不管屏幕大小，全都用同一张图

这个问题在移动端特别明显。你网站上放的是2000x1500的高清大图，用户手机屏幕只有375px宽，结果还是下载完整的大图，然后浏览器再把它缩小显示。流量钱白花了，加载还慢。

第三个坑：布局偏移，看着就闹心

你肯定遇到过这种情况：打开网页正准备点击某个按钮，图片突然加载出来，整个页面往下一跳，你点到了别的地方。这就是CLS（Cumulative Layout Shift）问题，Google把它列为Core Web Vitals核心指标之一，直接影响你的SEO排名。

Image 组件的自动优化能力

Next.js的Image组件就是专门来解决这些问题的。它不是简单的img标签包装，而是一整套图片优化解决方案。

自动格式选择

Image组件会检查用户浏览器的Accept请求头，自动判断浏览器支持哪些格式。支持AVIF就给AVIF，支持WebP就给WebP，都不支持才给原格式。这套逻辑完全自动，你不用写一行代码。

我之前测试过，一张500KB的JPEG，自动转成WebP后变成180KB，转成AVIF只有120KB。你想想，网站上有几十上百张图片，这能省多少带宽。

响应式加载

Image组件会根据用户设备的屏幕尺寸，自动生成并加载对应大小的图片。手机用户看到的是宽度375px的版本，桌面用户看到的是1920px的版本。这个功能叫srcset，普通img标签也能做，但你得手动写一大堆配置。Image组件全自动处理。

懒加载

默认情况下，Image组件只加载出现在视口内的图片。页面底部的图片，用户滚动到那里才开始加载。这个特性能大幅减少首次加载的数据量，让页面打开速度快很多。

有数据显示，正确使用Next.js Image组件，能让图片体积减少60-80%，把LCP指标控制在2.5秒以内，CLS接近于零。这可不是理论数字，是我实际项目里测出来的。

基础用法：本地图片 vs 远程图片

刚开始用Image组件，很多人（包括我）最困惑的就是：为什么有些图片能直接用，有些就报错？其实主要就是本地图片和远程图片的处理方式不一样。

本地图片：最简单的场景

本地图片是指放在你项目里的图片文件，有两种常用方式。

方式一：import导入（推荐）

import heroImage from '/public/images/hero.jpg'
import Image from 'next/image'

export default function Home() {
  return (
    <Image
      src={heroImage}
      alt="Hero image"
    />
  )
}

这种方式最省心，Next.js会在构建时自动读取图片的宽高信息，你连width和height都不用写。我现在基本都用这种方式处理本地图片。

方式二：直接写路径

<Image
  src="/images/hero.jpg"
  width={1920}
  height={1080}
  alt="Hero image"
/>

如果你的图片放在public文件夹，也可以直接写路径。但这种方式你必须手动指定宽高，忘了写就会报错。

远程图片：最容易踩坑的地方

远程图片是指从外部URL加载的图片，比如你的图片存在云存储服务上。这个场景最容易出问题。

常见错误：“Un-configured Host”

<Image
  src="https://images.unsplash.com/photo-123456"
  width={800}
  height={600}
  alt="Sample image"
/>

如果你直接这么写，十有八九会看到这个错误：

Error: Invalid src prop (https://images.unsplash.com/photo-123456) on `next/image`, 
hostname "images.unsplash.com" is not configured under images in your `next.config.js`

为什么会这样？Next.js担心恶意用户利用你的服务器优化任意URL的图片，白嫖你的服务器资源。所以它要求你明确声明哪些域名的图片是允许优化的。

正确做法：配置 remotePatterns

在next.config.js里加上这段配置（Next.js 14+推荐）：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'images.unsplash.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'https',
        hostname: 's3.amazonaws.com',
        port: '',
        pathname: '/my-bucket/**',
      },
    ],
  },
}

module.exports = nextConfig

这里每个配置项的意思：

• protocol：https或http，通常用https
• hostname：图片域名，必须完全匹配
• port：端口号，通常留空
• pathname：路径匹配规则，/**表示所有路径，也可以限制特定路径

配置完记得重启开发服务器，改配置文件必须重启才生效。我第一次就是改了配置没重启，还以为配置没用，白折腾了半小时。

旧版配置方式（不推荐）

如果你看到有些教程写的是domains配置：

module.exports = {
  images: {
    domains: ['images.unsplash.com', 's3.amazonaws.com'],
  },
}

这种写法在Next.js 14以后已经废弃了，虽然现在还能用，但建议改用remotePatterns。因为remotePatterns更安全，可以限制具体的路径范围。

宽高必须指定的原因

不管是本地还是远程图片，除了用import的方式，你都得手动指定width和height。这是为了防止CLS布局偏移。

浏览器在加载图片前，需要知道这个图片会占多大空间，才能提前预留出来。如果不知道尺寸，浏览器只能等图片下载完再调整布局，页面就会跳一下。

有些人会想，我的图片是响应式的，宽度要随着屏幕大小变化，怎么指定固定宽高？后面讲到fill属性的时候会解决这个问题。

解决布局偏移问题（CLS优化）

页面一跳一跳的，真的很烦。我之前做的一个新闻网站，用户抱怨最多的就是”正要点标题，图片一加载，点到广告去了”。后来我仔细研究了CLS这个指标，才发现这个问题有多重要。

CLS是什么，为什么重要

CLS（Cumulative Layout Shift）翻译过来叫累积布局偏移。简单说就是，页面加载过程中，元素位置突然移动的程度。

Google把CLS列为Core Web Vitals三大核心指标之一，直接影响你的SEO排名。CLS分数超过0.1就算差，低于0.1才算好。你想想，一个网页十几二十张图片，每张图片加载时都让页面跳一下，CLS能不高吗？

更重要的是用户体验。我自己浏览网页时，遇到那种一直跳动的页面，基本就直接关了，根本没心情看内容。

Image 组件如何防止 CLS

Next.js的Image组件防止CLS的核心原理很简单：提前预留空间。

当你给Image组件设置了width和height，浏览器在图片下载之前，就会在页面上预留出对应大小的空白区域。等图片加载完，直接填充进去，页面布局不会有任何变化。

<Image
  src="/product.jpg"
  width={400}
  height={300}
  alt="Product image"
/>

这段代码，浏览器会先在页面上画一个400x300的占位框，然后才开始加载图片。CLS值直接归零。

问题是，现在的网页都是响应式设计，图片宽度要跟着屏幕大小变化。固定宽高的方式就不够用了。

响应式图片的正确姿势：fill 属性

对于响应式图片，Next.js提供了fill属性。这个属性让图片填充整个父容器，宽高由CSS控制。

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/hero.jpg"
    fill
    style={{ objectFit: 'cover' }}
    alt="Hero image"
  />
</div>

注意几个关键点：

1. 父容器必须设置 position: relative：这样图片才知道相对于谁来填充
2. 父容器必须有明确的高度：不能是height: auto，必须是具体数值或百分比
3. 用 objectFit 控制图片适应方式：cover会裁剪图片填满容器，contain会完整显示但可能留白

这种方式，浏览器看到父容器的高度，就能提前预留空间，一样能防止CLS。

sizes 属性：告诉浏览器该加载多大的图

用了fill属性，还要配合sizes属性，不然Next.js不知道该生成多大的图片。

<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image
    src="/hero.jpg"
    fill
    sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
    style={{ objectFit: 'cover' }}
    alt="Hero image"
  />
</div>

sizes属性的意思是：

• 屏幕宽度≤768px时，图片占视口100%宽度
• 屏幕宽度在768px-1200px之间，图片占视口50%宽度
• 屏幕宽度>1200px，图片占视口33%宽度

Next.js会根据这个配置，生成多个不同尺寸的图片，浏览器自动选择最合适的那个。手机用户就不用下载桌面版的大图了，流量省了，速度也快了。

实际案例：不同场景的处理方式

Hero图（全宽首屏大图）

<div style={{ position: 'relative', width: '100%', height: '60vh' }}>
  <Image
    src="/hero.jpg"
    fill
    priority
    sizes="100vw"
    style={{ objectFit: 'cover' }}
    alt="Hero image"
  />
</div>

这里用priority属性（后面会讲），让首屏Hero图优先加载。sizes="100vw"表示图片永远占满整个视口宽度。

文章缩略图（固定尺寸）

<Image
  src={post.thumbnail}
  width={300}
  height={200}
  alt={post.title}
/>

缩略图尺寸固定，直接用width和height最简单。

产品列表（响应式网格）

<div style={{ position: 'relative', width: '100%', paddingBottom: '100%' }}>
  <Image
    src={product.image}
    fill
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
    style={{ objectFit: 'cover' }}
    alt={product.name}
  />
</div>

用paddingBottom: '100%'创建一个正方形容器（响应式1:1比例），适合产品图展示。图片在不同屏幕下占据不同宽度，移动端一行一个，平板一行两个，桌面一行三个。

性能优化核心配置

掌握了基础用法和CLS优化，接下来讲几个关键配置，能让性能再上一个台阶。

priority：首屏关键图片要优先

默认情况下，Image组件的图片都是懒加载的，只有滚动到视口才开始加载。但首屏的Hero图、Logo这些关键元素，你肯定希望它们立刻加载，不然用户看到的就是一片空白。

这时候就要用priority属性：

<Image
  src="/hero.jpg"
  width={1920}
  height={1080}
  priority
  alt="Hero image"
/>

加了priority，Next.js会：

1. 取消懒加载，立即开始加载图片
2. 在HTML的<head>里插入preload标签，告诉浏览器这张图片很重要
3. LCP（Largest Contentful Paint）指标会明显改善

我有次做性能优化，就是把首页Hero图加了priority，LCP从3.8秒降到2.1秒。效果立竿见影。

什么时候用 priority？

1. 首页Hero图
2. 网站Logo（如果很大的话）
3. 文章详情页的头图
4. 任何可能成为LCP元素的图片

你可能会想，那我所有图片都加priority不就更快了？别。priority会让浏览器立即下载，如果页面上20张图片都加了，浏览器同时下载20张图，反而会拖慢速度。这个属性要省着用，只给最关键的图片加。

Next.js 16 的变化

说到这，得提一下Next.js 16的更新（目前还是RC版本）。priority属性要改成preload属性了。如果你用的是最新版，代码要改成：

<Image
  src="/hero.jpg"
  width={1920}
  height={1080}
  preload
  alt="Hero image"
/>

或者更灵活的写法，用loading="eager"和fetchPriority="high"：

<Image
  src="/hero.jpg"
  width={1920}
  height={1080}
  loading="eager"
  fetchPriority="high"
  alt="Hero image"
/>

loading：控制加载策略

loading属性有两个值：

• lazy（默认）：懒加载，图片进入视口才开始下载
• eager：立即加载，不管图片在不在视口

大部分情况下，默认的lazy就够了。只有首屏关键图片才需要改成eager。

// 页面底部的相关文章图片，用默认的 lazy
<Image src="/related-1.jpg" width={300} height={200} alt="Related post" />

// 首屏主要内容图片，改成 eager
<Image src="/main-content.jpg" width={800} height={600} loading="eager" alt="Main content" />

quality：质量与大小的平衡

quality属性控制图片压缩质量，范围是1-100，默认值是75。

<Image
  src="/product.jpg"
  width={800}
  height={600}
  quality={90}
  alt="Product image"
/>

质量越高，图片越清晰，但文件也越大。这里有个经验值：

• 首屏重点图片：quality={90}，保证清晰度
• 一般内容图片：quality={75}（默认），平衡质量和大小
• 缩略图、背景图：quality={60}，节省带宽

我做过测试，quality从90降到75，肉眼几乎看不出区别，但文件体积能减少30%左右。从75降到60，普通屏幕上也还能接受，体积再减20%。

重要更新：Next.js 16开始，quality成为必填项了。这是为了防止恶意用户通过URL参数请求各种不同质量的图片，消耗服务器资源。升级到16之后，记得给每个Image组件加上quality属性。

自动格式选择：WebP vs AVIF

这个功能是完全自动的，你不用配置任何东西。Next.js会检查浏览器的Accept请求头，自动选择最合适的格式。

• 浏览器支持AVIF → 输出AVIF（最小，但编码慢）
• 浏览器支持WebP → 输出WebP（较小，兼容性好）
• 都不支持 → 输出原格式（JPEG/PNG）

AVIF比WebP还小30-40%，但兼容性稍差一点。不过主流浏览器（Chrome 85+、Firefox 93+、Safari 16+）都支持AVIF了，基本不用担心。

实战配置示例

把这些配置组合起来，不同场景应该这么写：

首页Hero图（优先加载、高质量）

<div style={{ position: 'relative', width: '100%', height: '60vh' }}>
  <Image
    src="/hero.jpg"
    fill
    priority
    quality={90}
    sizes="100vw"
    style={{ objectFit: 'cover' }}
    alt="Welcome to our site"
  />
</div>

文章列表缩略图（懒加载、中等质量）

{posts.map(post => (
  <Image
    key={post.id}
    src={post.thumbnail}
    width={300}
    height={200}
    quality={75}
    alt={post.title}
  />
))}

页尾相关链接图标（懒加载、低质量）

<Image
  src="/footer-icon.png"
  width={40}
  height={40}
  quality={60}
  alt="Footer icon"
/>

常见错误与解决方案

前面讲了那么多用法，接下来聊聊实际开发中最容易踩的几个坑。这些错误我自己都遇到过，有些还卡了挺久。

错误1：Un-configured Host

这个错误出现频率最高。

错误信息：

Error: Invalid src prop (https://example.com/image.jpg) on `next/image`, 
hostname "example.com" is not configured under images in your `next.config.js`

原因：
你在Image组件里用了外部URL，但没有在next.config.js里配置remotePatterns允许这个域名。

解决方案：
在next.config.js里添加配置：

module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
        port: '',
        pathname: '/**',
      },
    ],
  },
}

注意事项：

1. 改完配置文件必须重启开发服务器（npm run dev）
2. hostname必须完全匹配，不能用通配符。*.example.com不行，只能写具体的子域名
3. 如果你的图片来自多个域名，就在remotePatterns数组里多加几个对象

错误2：布局偏移 / CLS过高

表现：
页面加载时，图片区域突然出现，把其他内容往下挤，页面一跳一跳的。

原因：
两种可能：

1. 没有设置width和height，浏览器不知道该预留多大空间
2. 用了fill属性，但父容器没有设置高度

解决方案：

情况1：给图片设置明确的宽高

// ❌ 错误：缺少宽高
<Image src="/product.jpg" alt="Product" />

// ✅ 正确：指定宽高
<Image src="/product.jpg" width={400} height={300} alt="Product" />

情况2：给父容器设置高度

// ❌ 错误：父容器没有高度
<div style={{ position: 'relative', width: '100%' }}>
  <Image src="/hero.jpg" fill alt="Hero" />
</div>

// ✅ 正确：父容器有明确高度
<div style={{ position: 'relative', width: '100%', height: '400px' }}>
  <Image src="/hero.jpg" fill alt="Hero" />
</div>

错误3：图片显示模糊或尺寸过大

表现：
移动端访问时，图片要么模糊，要么加载很慢。

原因：
没有配置sizes属性，Next.js不知道该生成多大的图片，就用了默认值100vw（整个视口宽度）。如果你的图片实际上只占屏幕一半，就生成了比需要大两倍的图。

解决方案：
根据实际渲染尺寸配置sizes：

// 图片在不同屏幕下占据不同宽度
<Image
  src="/product.jpg"
  width={400}
  height={300}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
  alt="Product"
/>

如果你的图片始终是固定宽度（比如缩略图），直接用width和height就行，不需要sizes。

错误4：使用了废弃的API

Next.js 14和15有一些API变化，如果你看的是旧教程，可能会用到已经废弃的写法。

废弃1：domains配置

// ❌ Next.js 14+ 已废弃
module.exports = {
  images: {
    domains: ['example.com'],
  },
}

// ✅ 改用 remotePatterns
module.exports = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'example.com',
      },
    ],
  },
}

废弃2：onLoadingComplete回调

// ❌ Next.js 14+ 已废弃
<Image
  src="/image.jpg"
  width={400}
  height={300}
  onLoadingComplete={() => console.log('loaded')}
  alt="Image"
/>

// ✅ 改用 onLoad
<Image
  src="/image.jpg"
  width={400}
  height={300}
  onLoad={() => console.log('loaded')}
  alt="Image"
/>

Next.js 16的变化（即将发布）：

// ⚠️ Next.js 16 中 priority 改为 preload
// 旧写法（Next.js 15及以前）
<Image src="/hero.jpg" width={1920} height={1080} priority alt="Hero" />

// 新写法（Next.js 16）
<Image src="/hero.jpg" width={1920} height={1080} preload alt="Hero" />
// 或者
<Image src="/hero.jpg" width={1920} height={1080} loading="eager" fetchPriority="high" alt="Hero" />

快速排错检查清单

遇到问题时，按这个顺序检查：

1. ✅ 远程图片是否配置了remotePatterns？
2. ✅ 配置文件修改后是否重启了开发服务器？
3. ✅ 图片是否设置了width和height（或父容器设置了高度）？
4. ✅ 使用fill时，父容器是否有position: relative和明确的高度？
5. ✅ 响应式图片是否配置了合理的sizes？
6. ✅ 是否使用了已废弃的API（domains、onLoadingComplete等）？

进阶技巧与最佳实践

掌握了基础用法和常见错误处理，再来看几个进阶技巧，能让你的图片体验更上一层楼。

使用placeholder提升体验

图片加载需要时间，特别是网络慢的时候。如果能先显示一个模糊的占位图，用户体验会好很多。

blur placeholder（模糊占位图）

import Image from 'next/image'
import heroImage from '/public/hero.jpg'

export default function Hero() {
  return (
    <Image
      src={heroImage}
      placeholder="blur"
      alt="Hero image"
    />
  )
}

用import导入的本地图片，Next.js会自动生成一个低质量的base64占位图。加上placeholder="blur"，图片加载时就会先显示模糊版本，再逐渐清晰。这种效果在Instagram、Medium等网站上很常见。

远程图片的blur placeholder

远程图片需要你手动提供blurDataURL：

<Image
  src="https://example.com/image.jpg"
  width={800}
  height={600}
  placeholder="blur"
  blurDataURL="data:image/jpeg;base64,/9j/4AAQSkZJRg..."
  alt="Remote image"
/>

你可以用这个在线工具生成blurDataURL，或者在服务端用sharp库生成。

empty placeholder

如果你不需要占位效果，可以明确设置placeholder="empty"，这样图片加载前就是空白区域。这是默认行为，不写也一样。

配合CDN使用

Next.js默认用自己的Image Optimization API来优化图片。如果你用的是Cloudinary、Uploadcare这些图片CDN服务，可以配置自定义loader。

// next.config.js
module.exports = {
  images: {
    loader: 'cloudinary',
    path: 'https://res.cloudinary.com/your-cloud-name/',
  },
}

或者自己写loader函数：

// next.config.js
module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './my-loader.js',
  },
}

// my-loader.js
export default function myLoader({ src, width, quality }) {
  return `https://cdn.example.com/${src}?w=${width}&q=${quality || 75}`
}

这样所有图片请求都会走你的CDN，而不是Next.js服务器。适合高流量网站。

响应式图片的完整方案

响应式图片不只是调整大小，还要考虑不同场景的展示方式。

移动端、平板、桌面的差异化策略

<div className="image-container">
  <Image
    src="/product.jpg"
    width={1200}
    height={800}
    sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
    style={{
      width: '100%',
      height: 'auto',
    }}
    alt="Product image"
  />
</div>

配合CSS：

.image-container {
  width: 100%;
}

@media (min-width: 640px) {
  .image-container {
    width: 50%;
  }
}

@media (min-width: 1024px) {
  .image-container {
    width: 33.333%;
  }
}

sizes属性和CSS媒体查询保持一致，浏览器就能选择最合适的图片尺寸。

监控和调试

Chrome DevTools查看图片加载

打开Chrome DevTools → Network标签 → 勾选Img筛选，可以看到每张图片的：

• 文件大小
• 加载时间
• 响应头（包括格式信息）

你会发现，用了Image组件的图片，URL后面会带上?w=xxx&q=xxx这样的参数，这就是Next.js在做优化。

Lighthouse性能测试

Chrome DevTools → Lighthouse → 点击”Analyze page load”，重点看这几个指标：

• LCP (Largest Contentful Paint)：理想值 < 2.5秒
• CLS (Cumulative Layout Shift)：理想值 < 0.1
• Image元素建议：Lighthouse会告诉你哪些图片没优化好

我每次做完图片优化，都会跑一次Lighthouse，看看性能分数能提升多少。一般能从60多分提升到90+。

持续监控Core Web Vitals

对于生产环境，建议用Google Search Console或者Vercel Analytics持续监控Core Web Vitals指标。这样能及时发现性能退化问题。

结论

说了这么多，其实Next.js Image组件的核心就是解决三个问题：图片加载慢、配置报错、布局偏移。

用对了Image组件，你能得到：

• 60-80%的图片体积减少（自动WebP/AVIF转换）
• LCP保持在2.5秒以内（合理使用priority）
• CLS接近于零（正确设置宽高或fill）

最关键的几个配置要记住：

1. 远程图片配置remotePatterns，改完记得重启服务器
2. 设置width和height，或者用fill配合父容器高度
3. 首屏关键图片加priority，其他图片默认懒加载就好
4. 响应式图片配置sizes，让浏览器选择合适的尺寸
5. 根据图片重要性调整quality：首屏90，一般75，缩略图60

现在就去检查你的项目，把那些<img>标签换成<Image>吧。用Lighthouse测一次，看看性能能提升多少分。我敢打赌，至少能涨20分。

Next.js Image 组件优化完整流程

从配置远程图片到优化性能、避免布局偏移的完整步骤

⏱️ 预计耗时: 2 小时

1. 1

   步骤1: 配置远程图片域名

   在next.config.js中配置：
   • 添加images.remotePatterns数组
   • 设置protocol、hostname、pathname
   • 支持通配符匹配
   
   示例：
   images: {
   remotePatterns: [
   {
   protocol: 'https',
   hostname: 'example.com',
   pathname: '/images/**'
   }
   ]
   }
   
   注意：配置后必须重启开发服务器
2. 2

   步骤2: 替换img标签为Image组件

   基础用法：
   • 导入：import Image from 'next/image'
   • 必须设置width和height（或使用fill）
   • 添加alt文本（SEO必需）
   
   示例：
   <Image
   src="/hero.jpg"
   width={800}
   height={600}
   alt="描述文字"
   />
3. 3

   步骤3: 处理布局偏移（CLS）

   方法1：设置固定尺寸
   • width和height必须设置
   • 使用aspect-ratio保持比例
   
   方法2：使用fill模式
   • 父容器设置position: relative
   • Image组件使用fill属性
   • 父容器设置宽高
   
   方法3：使用placeholder
   • blurDataURL：模糊占位图
   • placeholder="blur"：显示占位图
4. 4

   步骤4: 优化加载性能

   首屏关键图片：
   • 添加priority属性
   • 设置quality=90
   • 确保图片在viewport内
   
   其他图片：
   • 默认懒加载（不需要配置）
   • quality=75（平衡质量和体积）
   • 使用sizes属性实现响应式
   
   缩略图：
   • quality=60即可
   • 使用小尺寸版本
5. 5

   步骤5: 配置响应式图片

   使用sizes属性：
   • 告诉浏览器不同屏幕尺寸需要的图片大小
   • 浏览器自动选择最合适的图片
   
   示例：
   <Image
   src="/hero.jpg"
   width={1200}
   height={630}
   sizes="(max-width: 768px) 100vw, 50vw"
   alt="描述"
   />
   
   这样移动端加载全宽图片，桌面端加载50%宽度
6. 6

   步骤6: 测试和验证

   性能测试：
   • 使用Lighthouse测试LCP和CLS
   • 检查Network tab查看图片加载情况
   • 验证图片格式（WebP/AVIF）
   
   检查清单：
   • 所有远程图片都已配置域名
   • 所有图片都有width和height
   • 首屏图片添加了priority
   • CLS分数接近0
   • 图片体积减少60%以上

常见问题

为什么远程图片会报 'Un-configured Host' 错误？

Next.js Image组件出于安全考虑，需要明确配置允许的远程图片域名。在next.config.js的images.remotePatterns中添加域名配置，包括protocol、hostname和可选的pathname。配置后必须重启开发服务器才能生效。

Image 组件必须设置 width 和 height 吗？

是的，必须设置。这是为了避免布局偏移（CLS）。如果不想设置固定尺寸，可以使用fill模式配合父容器的宽高，或者使用aspect-ratio保持比例。不设置会导致CLS分数变差。

如何避免图片加载时的布局偏移？

方法：1) 设置width和height；2) 使用fill模式配合父容器；3) 使用placeholder=&quot;blur&quot;显示模糊占位图；4) 使用aspect-ratio保持比例。关键是确保图片容器有明确的尺寸。

priority 属性什么时候用？

priority用于首屏关键图片（Above the fold），告诉Next.js这些图片需要立即加载，不要懒加载。通常用于Hero图片、Logo等首屏可见的重要图片。不要滥用，否则会降低性能。

Image 组件会自动转换图片格式吗？

是的。Next.js Image组件会自动将图片转换为WebP格式（如果浏览器支持），支持AVIF的浏览器会优先使用AVIF。这可以显著减少图片体积（通常减少60-80%），提升加载速度。

sizes 属性有什么用？

sizes属性告诉浏览器在不同屏幕尺寸下需要加载多大的图片，浏览器会根据这个信息和srcset自动选择最合适的图片尺寸。这对于响应式图片优化非常重要，可以避免移动端加载过大的图片。

如何优化图片质量？

使用quality属性控制图片质量：首屏关键图片用90，一般图片用75，缩略图用60。质量越高文件越大，需要平衡。也可以使用不同的图片尺寸：大图用于桌面端，小图用于移动端。

如果遇到问题，回来翻翻这篇文章的常见错误部分，基本都能找到答案。Next.js的Image组件虽然配置项多，但掌握了核心几个，就能应付大部分场景了。

20 分钟阅读 · 发布于: 2025年12月19日 · 修改于: 2026年1月22日