图片优化

根据 Web Almanac，图片在典型网站的 页面权重 中占很大一部分，并且可能对你网站的 LCP 性能 产生相当大的影响。

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

• 尺寸优化： 为每种设备自动提供正确尺寸的图片，并使用现代图片格式如 WebP。
• 视觉稳定性： 在图片加载时自动防止布局偏移。
• 更快的页面加载： 图片仅在进入视口时才使用原生浏览器懒加载进行加载，并带有可选的模糊占位符。
• 资源灵活性： 按需调整图片大小，即使是存储在远程服务器上的图片

🎥 观看： 了解更多关于如何使用 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 './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/**',
        search: '',
      },
    ],
  },
}

了解更多关于 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 元素是缺少 priority 属性的 <Image>，你将看到控制台警告。

一旦你确定了 LCP 图片，你可以像这样添加属性

import Image from 'next/image'
import profilePic from '../public/me.png'
 
export default function Page() {
  return <Image src={profilePic} alt="Picture of the author" priority />
}

有关优先级的更多信息，请参阅 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/image 组件和 Next.js 图片优化 API 可以在 next.config.js 文件中配置。这些配置允许你启用远程图片、定义自定义图片断点、更改缓存行为等等。

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