资源

Next.js 可以在顶层 public 目录下提供静态资源，例如图像。public 目录中的文件可以像 pages 一样从应用程序的根目录引用。

public 目录也适用于 robots.txt、Google 网站验证以及任何其他静态资源。查看 静态文件服务文档以了解更多信息。

下载您的个人资料图片

首先，让我们检索您的个人资料图片。

• 以 .jpg 格式下载您的个人资料图片（或使用此文件）。
• 在 public 目录内创建一个 images 目录。
• 将图片另存为 public/images 目录中的 profile.jpg。
• 图像大小可以约为 400px x 400px。
• 您可以删除直接位于 public 目录下的未使用的 SVG logo 文件。

未优化的图像

使用常规 HTML，您可以按如下方式添加您的个人资料图片

<img src="/images/profile.jpg" alt="Your Name" />

但是，这意味着您必须手动处理

• 确保您的图像在不同屏幕尺寸上具有响应性
• 使用第三方工具或库优化您的图像
• 仅在图像进入视口时加载它们

等等。相反，Next.js 提供了开箱即用的 Image 组件来为您处理此问题。

Image 组件和图像优化

next/image 是 HTML <img> 元素的扩展，专为现代网络而发展。

Next.js 默认也支持图像优化。这允许以现代格式（如 WebP）调整大小、优化和提供图像（当浏览器支持时）。这避免了向具有较小视口的设备发送大型图像。它还允许 Next.js 自动采用未来的图像格式，并将它们提供给支持这些格式的浏览器。

自动图像优化适用于任何图像源。即使图像由外部数据源（如 CMS）托管，它仍然可以被优化。

使用 Image 组件

Next.js 不是在构建时优化图像，而是在用户请求时按需优化图像。与静态站点生成器和仅静态解决方案不同，无论您交付 10 张图像还是 1000 万张图像，您的构建时间都不会增加。

图像默认是延迟加载的。这意味着您的页面速度不会因视口外的图像而受到影响。图像会在滚动到视口中时加载。

图像始终以避免累积布局偏移 (Cumulative Layout Shift) 的方式呈现，这是一个 Google 将在核心网页指标 (Core Web Vitals) 中用于搜索排名的指标 。

这是一个使用 next/image 显示我们的个人资料图片的示例。height 和 width 属性应为所需的渲染尺寸，宽高比应与源图像相同。

注意：我们将在后面的“优化布局”中使用此组件，无需立即复制它。

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // Route of the image file
    height={144} // Desired size with correct aspect ratio
    width={144} // Desired size with correct aspect ratio
    alt="Your Name"
  />
);

要了解有关自动图像优化的更多信息，请查看文档。

要了解有关 Image 组件的更多信息，请查看 next/image 的 API 参考。