图像优化

根据 Web Almanac，图像占据了典型网站 页面权重 的很大一部分，并且可能对您网站的 LCP 性能 产生重大影响。

Next.js Image 组件扩展了 HTML <img> 元素，并具有自动图像优化功能

• 尺寸优化：使用 WebP 和 AVIF 等现代图像格式，自动为每个设备提供正确尺寸的图像。
• 视觉稳定性：在加载图像时，自动防止 布局偏移。
• 更快的页面加载：图像仅在进入视口时使用原生浏览器延迟加载进行加载，并提供可选的模糊向上占位符。
• 资产灵活性：即使对于存储在远程服务器上的图像，也可以按需调整图像大小。

🎥 观看：了解如何使用 next/image → YouTube（9 分钟）。

用法

import Image from 'next/image'

然后，您可以为图像定义 src（本地或远程）。

本地图像

要使用本地图像，请import 您的 .jpg、.png 或 .webp 图像文件。

Next.js 将 自动确定 图像的内在 width 和 height，方法是根据导入的文件。这些值用于确定图像比例并防止在加载图像时发生 累积布局偏移。

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return (
    <Image
      src={profilePic}
      alt="Picture of the author"
      // width={500} automatically provided
      // height={500} automatically provided
      // blurDataURL="data:..." automatically provided
      // placeholder="blur" // Optional blur-up while loading
    />
  )
}

警告：不支持动态 await import() 或 require()。import 必须是静态的，以便可以在构建时对其进行分析。

您可以选择在 next.config.js 文件中配置 localPatterns，以允许特定的图像并阻止所有其他图像。

module.exports = {
  images: {
    localPatterns: [
      {
        pathname: '/assets/images/**',
        search: '',
      },
    ],
  },
}

远程图像

要使用远程图像，src 属性应为 URL 字符串。

由于 Next.js 在构建过程中无法访问远程文件，因此您需要手动提供 width、height 和可选的 blurDataURL 属性。

width 和 height 属性用于推断图像的正确纵横比，并避免图像加载时的布局偏移。width 和 height 并不决定渲染图像文件的大小。了解更多关于 图像大小。

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://s3.amazonaws.com/my-bucket/profile.png"
      alt="Picture of the author"
      width={500}
      height={500}
    />
  )
}

为了安全地允许优化图像，请在 next.config.js 中定义一个支持的 URL 模式列表。尽可能具体以防止恶意使用。例如，以下配置将仅允许来自特定 AWS S3 存储桶的图像

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

了解更多关于 remotePatterns 配置。如果您想对图像 src 使用相对 URL，请使用 loader。

域名

有时您可能希望优化远程图像，但仍使用内置的 Next.js 图像优化 API。为此，请将 loader 保留为其默认设置，并为 Image src 属性输入绝对 URL。

为了保护您的应用程序免受恶意用户的攻击，您必须定义一个您打算与 next/image 组件一起使用的远程主机名列表。

了解更多关于 remotePatterns 配置。

加载器

请注意，在 前面示例 中，为本地图像提供了部分 URL（"/me.png"）。这是因为加载器架构。

加载器是一个生成图像 URL 的函数。它修改提供的 src，并生成多个 URL 以请求不同尺寸的图像。这些多个 URL 用于自动 srcset 生成，以便访问您网站的访客将获得适合其视口的图像。

Next.js 应用程序的默认加载器使用内置的图像优化 API，该 API 优化来自网络任何位置的图像，然后直接从 Next.js Web 服务器提供服务。如果您想直接从 CDN 或图像服务器提供图像，您可以使用几行 JavaScript 编写自己的加载器函数。

您可以使用 loader 属性 为每个图像定义一个加载器，或使用 loaderFile 配置 在应用程序级别定义。

优先级

您应该将 priority 属性添加到将成为每个页面 最大内容绘制 (LCP) 元素 的图像。这样做可以让 Next.js 特别优先加载图像（例如，通过预加载标签或优先级提示），从而显着提升 LCP。

LCP 元素通常是页面视口中可见的最大图像或文本块。当您运行 next dev 时，如果 LCP 元素是 <Image> 且没有 priority 属性，您将看到控制台警告。

确定 LCP 图像后，您可以像这样添加属性

import Image from 'next/image'
 
export default function Home() {
  return (
    <>
      <h1>My Homepage</h1>
      <Image
        src="/me.png"
        alt="Picture of the author"
        width={500}
        height={500}
        priority
      />
      <p>Welcome to my homepage!</p>
    </>
  )
}

在 next/image 组件文档 中查看更多关于优先级的相关信息。

图像大小

图像影响性能的最常见方式之一是布局偏移，即图像在加载时将页面上的其他元素推开。此性能问题对用户来说非常恼人，因此它拥有自己的核心 Web 指标，称为 累积布局偏移。避免基于图像的布局偏移的方法是 始终调整图像大小。这使得浏览器可以在图像加载之前为其保留足够的空间。

由于 next/image 旨在保证良好的性能结果，因此不能以可能导致布局偏移的方式使用，并且**必须**以以下三种方式之一进行大小调整

1. 自动，使用 静态导入
2. 手动，通过包含 width 和 height 属性来确定图像的纵横比。
3. 隐式，使用 fill，这会导致图像扩展以填充其父元素。

如果我不知道图像的大小怎么办？

如果您从不知道图像大小的源访问图像，您可以执行以下操作

使用 fill

fill 属性允许图像的大小由其父元素确定。考虑使用 CSS 为图像的父元素在页面上留出空间，以及 sizes 属性以匹配任何媒体查询断点。您还可以使用 object-fit 与 fill、contain 或 cover，以及 object-position 来定义图像应该如何占据该空间。

规范化您的图像

如果您从受您控制的源提供图像，请考虑修改您的图像管道以将图像规范化为特定大小。

修改您的 API 调用

如果您的应用程序使用 API 调用（例如到 CMS）检索图像 URL，您可能能够修改 API 调用以连同 URL 一起返回图像尺寸。

如果上述方法都不适用于调整图像大小，则 next/image 组件设计为可以在页面上与标准 <img> 元素一起良好工作。

样式

Image 组件的样式设置类似于普通 <img> 元素的样式设置，但需要注意一些准则

• 使用 className 或 style，而不是 styled-jsx。
  • 在大多数情况下，我们建议使用 className 属性。这可以是导入的 CSS 模块、全局样式表 等。
  • 您还可以使用 style 属性分配内联样式。
  • 您不能使用 styled-jsx，因为它作用域限定到当前组件（除非您将样式标记为 global）。
• 使用 fill 时，父元素必须具有 position: relative
  • 这对于在该布局模式下正确渲染图像元素是必要的。
• 使用 fill 时，父元素必须具有 display: block
  • 这是 <div> 元素的默认值，但在其他情况下应指定。

示例

响应式

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Responsive() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column' }}>
      <Image
        alt="Mountains"
        // Importing an image will
        // automatically set the width and height
        src={mountains}
        sizes="100vw"
        // Make the image display full width
        style={{
          width: '100%',
          height: 'auto',
        }}
      />
    </div>
  )
}

填充容器

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Fill() {
  return (
    <div
      style={{
        display: 'grid',
        gridGap: '8px',
        gridTemplateColumns: 'repeat(auto-fit, minmax(400px, auto))',
      }}
    >
      <div style={{ position: 'relative', height: '400px' }}>
        <Image
          alt="Mountains"
          src={mountains}
          fill
          sizes="(min-width: 808px) 50vw, 100vw"
          style={{
            objectFit: 'cover', // cover, contain, none
          }}
        />
      </div>
      {/* And more images in the grid... */}
    </div>
  )
}

背景图像

import Image from 'next/image'
import mountains from '../public/mountains.jpg'
 
export default function Background() {
  return (
    <Image
      alt="Mountains"
      src={mountains}
      placeholder="blur"
      quality={100}
      fill
      sizes="100vw"
      style={{
        objectFit: 'cover',
      }}
    />
  )
}

有关 Image 组件与各种样式结合使用的示例，请参阅Image 组件演示。

其他属性

查看 next/image 组件可用的所有属性。

配置

可以在 next.config.js 文件 中配置 next/image 组件和 Next.js 图片优化 API。这些配置允许您启用远程图片、定义自定义图片断点、更改缓存行为 等。

阅读完整的图片配置文档以获取更多信息。