图片组件和自动图片优化

未优化的图片

使用常规 HTML，我们已添加了英雄图片，如下所示

<img src="large-image.jpg" alt="Large Image" />

但是，这意味着我们必须手动优化一些内容，例如

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

图片组件

Next 提供了一个 图片组件 可以为我们开箱即用地处理这些优化。

next/image 是 HTML img 元素的扩展，专为现代 Web 而进化。

这意味着可以使用 next/image.

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

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

自动图片优化如何工作？

按需优化

Next.js 不会在构建时优化图片，而是在用户请求时按需优化图片。与静态站点生成器和仅静态解决方案不同，无论发送十张图片还是一千万张图片，构建时间都不会增加。

延迟加载图片

默认情况下会延迟加载图片。页面速度不会因视口外部的图片而受到影响。图片仅在进入视野时加载。

避免 CLS

始终渲染图片以避免累积布局偏移 (CLS)。

使用图片组件

让我们使用 next/image 更新应用以显示我们的英雄图片。高度和宽度 props 应为所需的渲染尺寸，并且纵横比与源图片相同。

打开 pages/index.js 文件，并在文件开头添加对 next/image 中的 Image 的导入

import Image from 'next/image';

然后，将英雄 img 替换为 Image 组件

// Before
<img src="large-image.jpg" alt="Large Image" />

// After
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

页脚中也有一张图片。让我们也替换它

// Before
<img src="/vercel.svg" alt="Vercel Logo" />

// After
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

最后，在 Chrome DevTools 中运行另一个 Lighthouse 报告，并比较您的结果。