编辑“︁Next.js图像优化”︁（章节）

== 核心功能 ==

=== `next/image`组件 ===
Next.js的`next/image`组件是官方推荐的图像处理方案，具有以下特性：
* '''自动格式转换'''：将JPEG/PNG转换为WebP或AVIF（更高效的格式）
* '''懒加载'''：默认延迟加载视口外的图像
* '''尺寸优化'''：自动生成适合不同设备的响应式尺寸
* '''占位符'''：支持模糊占位（Blur Data URL）

<syntaxhighlight lang="jsx">
import Image from 'next/image';

export default function OptimizedImage() {
  return (
    <Image
      src="/example.jpg"
      alt="示例图片"
      width={800}
      height={600}
      priority // 对LCP图像启用预加载
      placeholder="blur" // 启用模糊占位
      blurDataURL="data:image/svg+xml;base64,..." // 低分辨率占位图
    />
  );
}
</syntaxhighlight>

=== 图像加载策略 ===
{| class="wikitable"
|-
! 策略 !! 描述 !! 适用场景
|-
| <code>lazy</code> || 延迟加载（默认） || 非关键图像
|-
| <code>eager</code> || 立即加载 || LCP图像或首屏内容
|}