章节24

自动图像优化

使用常规 HTML，我们已经添加了我们的英雄图像，如下所示：

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

然而，这意味着我们必须手动优化一些事情，例如：

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

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

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

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

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

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

图像默认是懒加载的。页面速度不会因为视口之外的图像而受到影响。图像只会在进入视图时加载。

图像总是渲染以避免累积布局偏移（CLS）。

让我们更新应用程序，使用 next/image 来显示我们的英雄图像。height 和 width 属性应该是期望的渲染尺寸，宽高比与源图像相同。

打开 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 报告并比较你的结果。

您已完成本章24