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

= Next.js图像优化 =

== 介绍 ==

'''Next.js图像优化'''是指在Next.js框架中通过内置功能或第三方工具对网页中的图像进行压缩、格式转换、懒加载等处理，以提高页面加载速度和用户体验的技术。Next.js提供了开箱即用的`next/image`组件，支持自动优化图像，并集成现代Web标准（如WebP格式、响应式图像等）。图像优化是SEO和性能优化的关键环节，直接影响网站的[[Core Web Vitals]]指标（如LCP、CLS）。

== 核心功能 ==

=== `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图像或首屏内容
|}

== 高级优化技术 ==

=== 自定义图像加载器 ===
可通过<code>loader</code>属性集成CDN服务（如Cloudinary、Imgix）：

<syntaxhighlight lang="jsx">
const cloudinaryLoader = ({ src, width, quality }) => {
  return `https://res.cloudinary.com/demo/image/upload/w_${width},q_${quality || 75}/${src}`;
};

<Image
  loader={cloudinaryLoader}
  src="sample.jpg"
  width={1200}
  height={800}
/>
</syntaxhighlight>

=== 性能指标对比 ===
使用WebPageTest测试结果示例：
<mermaid>
barChart
    title 图像加载时间对比(ms)
    x-axis 方案
    y-axis 时间
    series "JPEG"
        "原生<img>": 1200
        "next/image": 450
    series "WebP"
        "原生<img>": 800
        "next/image": 300
</mermaid>

== 数学原理 ==
图像压缩的质量因子（Quality Factor）计算公式：
<math>
Q_{adjusted} = Q_{max} \times \left(1 - \frac{S_{target}}{S_{original}}\right)
</math>
其中：
* <math>Q_{max}</math> = 最大质量（通常100）
* <math>S_{target}</math> = 目标文件大小
* <math>S_{original}</math> = 原始文件大小

== 实际案例 ==
'''案例：电商产品图优化'''
1. 原始状态：300KB JPEG图像，LCP时间2.4s
2. 优化步骤：
   * 转换为WebP格式（质量80）
   * 实现响应式尺寸（1200w, 800w, 400w）
   * 添加模糊占位符
3. 结果：文件大小降至90KB，LCP改善至1.1s

== 最佳实践 ==
* 对LCP图像使用<code>priority</code>属性
* 为静态图像配置<code>unoptimized=true</code>（避免重复优化）
* 通过<code>sizes</code>属性指定响应式断点：
<syntaxhighlight lang="jsx">
<Image
  sizes="(max-width: 768px) 100vw, 50vw"
  ...
/>
</syntaxhighlight>

== 常见问题 ==
'''Q：如何禁用自动优化？'''
A：在<code>next.config.js</code>中设置：
<syntaxhighlight lang="javascript">
module.exports = {
  images: {
    unoptimized: true
  }
}
</syntaxhighlight>

'''Q：自定义域名的白名单？'''
A：配置<code>domains</code>数组：
<syntaxhighlight lang="javascript">
module.exports = {
  images: {
    domains: ['example.com', 'cdn.example.org'],
  },
}
</syntaxhighlight>

== 延伸阅读 ==
* [[WebP与AVIF格式对比]]
* [[响应式图像设计原则]]
* [[Core Web Vitals优化指南]]

[[Category:后端框架]]
[[Category:Next.js]]
[[Category:Next.js SEO与性能优化]]