资产

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

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

下载您的个人资料图片

首先，我们来获取您的个人资料图片。

• 下载您的 .jpg 格式个人资料图片（或者使用此文件）。
• 在 public 目录内创建一个 images 目录。
• 将图片保存为 profile.jpg 到 public/images 目录中。
• 图片大小约为 400 像素 x 400 像素。
• 您可以删除 public 目录下未使用的 SVG 标志文件。

未优化的图像

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

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

然而，这意味着您必须手动处理

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

等等。相反，Next.js 提供了一个开箱即用的 Image 组件来为您处理这些。

图像组件和图像优化

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

Next.js 默认也支持图像优化。这允许调整大小、优化并以 WebP 等现代格式提供图像，前提是浏览器支持。这避免了向视口较小的设备传输大型图像。它还允许 Next.js 自动采用未来的图像格式，并将其提供给支持这些格式的浏览器。

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

使用图像组件

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

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

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

这是一个使用 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 参考。