静态资源

Next.js 可以托管静态资源，例如图片，这些资源存放在**public 目录**的顶层。public 目录中的文件可以从应用的根目录引用，类似于 pages 目录。

public 目录还可用于存放 robots.txt、Google 网站验证文件以及其他静态资源。查看静态文件托管文档以了解更多信息。

下载个人头像

首先，我们来获取你的个人头像。

• 下载你的个人头像，格式为 .jpg（或使用此文件）。
• 在 public 目录中创建一个 images 子目录。
• 将图片保存为 profile.jpg，存放在 public/images 目录中。
• 图片尺寸建议为 400px × 400px 左右。
• 你可以删除 public 目录下未使用的 SVG 徽标文件。

未优化的图片

在常规 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 Vital)之一。

以下示例展示了如何使用 next/image 显示个人头像。height 和 width 属性应为期望的渲染尺寸，且宽高比需与源图片一致。

注意： 我们将在“优化布局”部分使用此组件，现在无需复制。

import Image from 'next/image';
 
const YourComponent = () => (
  <Image
    src="/images/profile.jpg" // 图片文件路径
    height={144} // 期望高度（保持宽高比）
    width={144} // 期望宽度（保持宽高比）
    alt="Your Name"
  />
);

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

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