Next.js - 图片优化

在本文中，我们将学习在 Next.js 应用中优化图片的不同策略，以及使用优化图片的好处。

Next.js Image 组件

Next.js 提供了一个内置的 <Image> 组件，它扩展了 HTML 的 <img> 标签，用于优化网页中的图片。这个 <Image> 组件具有额外的 props 和属性，可以轻松在 Next.js 中创建优化的图片。<Image> 组件有助于

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

优化本地图片

本地图片指的是存储在 Next.js 应用目录中的图片。对于本地图片，Next.js 会根据导入的文件自动确定图片的固有宽度和高度。这些值用于确定图片比例，并在图片加载时防止 Layout Shift。

import Image from 'next/image';
import logo from './logo.png'
 
export default function Page() {
  return (
    <Image
        src={logo}
        alt="Picture of the Logo"
        // width={100} 在后端自动添加
        // height={100} 在后端自动添加
        // blurDataURL="data:..." 自动提供
        // placeholder="blur" // 可选的加载时模糊效果
    />
  )
}

优化远程图片

远程图片指的是存储在不同服务器上的图片（即 src 属性是一个 URL 字符串）。对于远程图片，你需要手动指定图片的宽度和高度。这是因为 Next.js 在构建过程中无法访问远程文件。

width 和 height 属性用于推断图片的正确宽高比，并在图片加载时避免布局偏移。提供的尺寸不会决定图片最终渲染的大小。

import Image from 'next/image'
 
export default function Page() {
  return (
    <Image
      src="https://www.example.com"
      alt="Picture of the Logo"
      width={500}       // 手动指定图片宽度
      height={500}      // 手动指定图片高度
    />
  )
}

优先加载图片

在 Next.js 中，我们可以使用 <Image> 组件的 'priority' prop 来优先加载特定图片。这对于占据视口较大区域的 LCP（Largest Contentful Paint）图片非常有用。在这种情况下，我们可以先加载 LCP 图片，然后按优先级加载其余图片。

示例

下面的代码显示了两张图片，其中一张比另一张具有更高的优先级。

import Image from 'next/image';

export default function Example() {
  return (
    <div>
      <h1>Image Priority</h1>
      <p>First Priority:</p>
      <Image src="/next.svg" alt="Image" priority /> 

      <p>Second Priority:</p>
      <Image src="/file.svg" alt="Image" />
    </div>
  );
}

输出

下面的图片显示了上述代码的输出。这里可以看到，当我们重新加载页面时，第一张图片立即加载，而第二张图片需要一些时间才能加载。

Next.js 中的图片懒加载

懒加载 是一种在 Web 应用中使用的优化技术，通过该技术，应用会延迟加载非关键资源，直到实际需要时才加载。在 Next.js 中，默认情况下所有图片都会被懒加载，这意味着它们仅在进入视口可见时才加载。如果您想禁用懒加载，可以在 <Image> 组件中将 loading 属性设置为 eager。

示例

在以下示例中，我们使用 <Image> 组件来懒加载图片。第一张图片将被懒加载，而第二张图片将被急切加载。

import Image from 'next/image';

export default function Example() {
    return (
    <div>
        <h1>Lazy Loading:</h1>
        <Image
            src="/file.svg"
            alt="Example Image"
        />

        <h1>Eager Loading:</h1>   
        <Image
            src="/next.svg"
            alt="Example Image"
            loading='eager'    // 禁用懒加载
        />
    </div>
    );
}

输出

在下面的输出中，您可以看到当我们重新加载页面时，第一张图片渲染得很慢，而第二张图片则会立即渲染。