图像优化

更新: 9/26/2025字数: 0 字时长: 0 分钟

Next.js组件扩展 HTML 元素以提供：<Image>

尺寸优化：使用 WebP 等现代图像格式，自动为每个设备提供正确大小的图像。
视觉稳定性：预防布局偏移加载图像时自动。
更快的页面加载：仅当图像使用本机浏览器延迟加载进入视口时加载图像，并带有可选的模糊占位符。
资产灵活性：按需调整图像大小，甚至存储在远程服务器上的图像。

1. 使用 `next/image` 组件

Next.js 的 next/image 组件帮助你自动优化图像的加载、尺寸和格式。通过它，你可以自动生成适配不同屏幕的图像，并且支持 WebP、AVIF 等高效格式的转换。

基本用法：

tsx

import Image from "next/image";

const MyComponent = () => (
  <div>
    <Image src="/path/to/image.jpg" alt="Description" width={500} height={300} />
  </div>
);

export default MyComponent;

src：图像的路径，支持静态资源和远程 URL（比如外部 CDN 图像）。
alt：图像的替代文本，利于 SEO 和可访问性。
width 和 height：设置图像的尺寸。Next.js 根据这些值自动生成最适合的图像。

2. 自动优化

当使用 next/image 组件时，Next.js 会自动对图像进行优化：

自动选择合适的格式：Next.js 会根据用户的浏览器和设备支持的图像格式来选择最合适的格式（如 WebP、AVIF 等）。
按需加载：默认情况下，图像会采用懒加载（lazy loading）。这意味着图像只会在用户滚动到它们时才开始加载，减少初始页面加载时间。
尺寸适配：next/image 会根据设备的不同自动选择合适的图像尺寸。例如，手机设备只会加载较小的图像。

3. 图像优化配置

可以通过 next.config.js 或 next.config.ts 来配置图像优化的行为。

配置图像优化选项：

module.exports = {
  images: {
    domains: ["example.com"], // 允许优化的外部域名
    formats: ["image/avif", "image/webp"], // 支持的图像格式
    deviceSizes: [640, 750, 1080, 1920, 2048], // 设备尺寸列表
    imageSizes: [16, 32, 48, 64, 128] // 各种图片尺寸
  }
};

domains：指定外部图片源（CDN、图片托管服务等），以便 Next.js 对这些图片进行优化。
formats：允许支持的图像格式，如 image/avif 或 image/webp，它们通常提供更高的压缩率。
deviceSizes：指定支持的设备尺寸，Next.js 会为每个尺寸生成不同的图像版本，适配不同设备。
imageSizes：指定不同的图像尺寸供浏览器选择。

4. 图片裁剪和缩放

next/image 支持图像的自动裁剪和缩放。可以通过 layout 属性来控制图像的布局方式。

常见的布局类型：

intrinsic：图像按其原始尺寸显示。
fixed：图像的尺寸固定为提供的 width 和 height。
responsive：图像会根据父容器的宽度动态调整大小。
fill：图像会完全填充父容器，可能会拉伸或压缩。

例如：

tsx

<Image
  src="/path/to/image.jpg"
  alt="Description"
  width={800}
  height={600}
  layout="responsive" // 图像会自适应容器宽度
/>

5. 外部图像源的优化

Next.js 支持从外部图像源（如 CDN 或其他图像服务）加载图像并自动进行优化。通过配置 next.config.js 中的 domains 参数，你可以允许 Next.js 优化来自指定域名的图像。

例如：

module.exports = {
  images: {
    domains: ["images.unsplash.com", "cdn.example.com"]
  }
};

这样，你就能使用来自这些域名的外部图像，并确保它们经过优化。

6. 加载策略

Next.js 会自动进行懒加载，但你也可以手动设置图像的加载策略。

priority：用于标记一个图像为优先加载，这对于首屏图像特别重要。例如：

tsx

<Image
  src="/path/to/image.jpg"
  alt="Description"
  width={500}
  height={300}
  priority // 标记为优先加载
/>

loading：通过 loading="lazy" 或 loading="eager" 来控制图像的加载行为。默认情况下是 lazy。

7. 图像优化的 URL

Next.js 使用专有的图像优化服务来处理图像，这意味着图像的 URL 会变成一个包含优化参数的 URL。

例如：

/path/to/image.jpg -> /_next/image?url=%2Fpath%2Fto%2Fimage.jpg&w=500&q=75

w：图像宽度。
q：图像质量（0 到 100 之间）。

8. 在开发环境中禁用图像优化

在开发环境中，图像优化功能是禁用的，这样可以加快本地开发的速度。如果需要启用它，可以通过修改 next.config.js 来开启图像优化。

module.exports = {
  images: {
    disableStaticImages: false // 启用静态图像优化
  }
};

图像优化 ​

1. 使用 next/image 组件 ​

基本用法： ​

2. 自动优化 ​

3. 图像优化配置 ​

配置图像优化选项： ​

4. 图片裁剪和缩放 ​

常见的布局类型： ​

5. 外部图像源的优化 ​

6. 加载策略 ​

7. 图像优化的 URL ​

8. 在开发环境中禁用图像优化 ​