SEO：自动图片优化 | Next.js

使用常规 HTML 时，我们这样添加 Hero 图片：

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

但这意味着我们需要手动优化以下方面：

Next.js 提供了 Image 组件，可以开箱即用地处理这些优化。

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

这意味着通过 next/image 可以自动实现：

该组件能避免向小视口设备传输大尺寸图片，并允许 Next.js 适配未来的图片格式，为支持的浏览器提供相应服务。

自动图片优化适用于任何图片来源。即使图片托管在外部数据源（如 CMS），仍可进行优化。

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

图片默认采用懒加载。视口外的图片不会影响页面速度，只有当图片进入视口时才会加载。

图片渲染始终遵循避免累积布局偏移 (CLS) 的原则。

让我们使用 next/image 更新应用来展示 Hero 图片。height 和 width 属性应设置为期望渲染尺寸，并保持与源图片相同的宽高比。

打开 pages/index.js 文件，在文件开头添加从 next/image 导入 Image 的语句：

import Image from 'next/image';

然后将 Hero 图片的 img 标签替换为 Image 组件：

// 替换前
<img src="large-image.jpg" alt="Large Image" />
 
// 替换后
<Image src="/large-image.jpg" alt="Large Image" width={3048} height={2024} />

页脚还有一个图片，同样进行替换：

// 替换前
<img src="/vercel.svg" alt="Vercel Logo" />
 
// 替换后
<Image src="/vercel.svg" alt="Vercel Logo" width={72} height={16} />

最后，在 Chrome DevTools 中再次运行 Lighthouse 报告并对比结果。

自动图片优化