资源

Next.js 可以服务静态资源，例如图像，位于顶级public 目录下。 public 内的文件可以从应用程序的根目录引用，类似于pages。

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

下载你的个人资料图片

首先，让我们获取你的个人资料图片。

• 下载你的个人资料图片，格式为 .jpg（或使用此文件）。
• 在public 目录内创建一个 images 目录。
• 将图片保存为 profile.jpg，放在 public/images 目录中。
• 图像尺寸可以大约为 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 万张图像，你的构建时间都不会增加。

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

图像始终以避免累积布局偏移的方式渲染，累积布局偏移是 Google 将用于搜索排名的核心 Web 指标之一。

以下是用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 参考。