自动图像优化

未优化的图像

使用常规 HTML，我们像这样添加了我们的 Hero 图像

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

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

• 确保我们的图像在不同屏幕尺寸上具有响应式。
• 使用第三方工具或库优化我们的图像。
• 在图像进入视口时对其进行延迟加载

Image 组件

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

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

这意味着可以使用 next/image 自动完成调整大小、优化以及以现代格式（如 WebP）（当浏览器支持时）提供图像。

该组件避免向视口较小的设备发送大型图像，并允许 Next.js 采用未来的图像格式并将这些图像提供给支持它们的浏览器。

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

自动图像优化如何工作？

按需优化

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

延迟加载图像

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

避免 CLS

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

使用 Image 组件

让我们使用 next/image 更新应用程序以显示我们的 hero 图像。height 和 width 属性应该是所需的渲染大小，宽高比与源图像相同。

打开 pages/index.js 文件并为以下内容添加导入

文件开头的来自 next/image 的 Image

import Image from 'next/image';

然后，将 hero 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 报告并比较您的结果。

延伸阅读

• Next.js：自动图像优化文档
• Next.js：next/image 的 API 参考