为啥我应该使用“下一个/图像”？

Posted 2023-03-06

【中文标题】为啥我应该使用“下一个/图像”？

【英文标题】：Why should I use 'next/image'?为什么我应该使用“下一个/图像”？

【发布时间】：2021-08-25 02:47:50

【问题描述】：

我是NextJS 的新手，但我在 ReactJS 和 Webpack 方面有很好的经验。我的问题是 NextJS 提供了一个包 'next/image'。我想非常深入地了解或理解为什么我应该使用他们的包来加载图像而不是默认的img标签。

在他们的文档中，他们说这样一行 We can serve an optimized image like so。 Optimized Image 是什么意思，为什么 ReactJS 或任何其他包不这样做？

【问题讨论】：

你发布的链接提到它改变了服务器端的宽度、高度和质量。

我也读过这件事。但这实际上意味着什么？为什么其他人不这样做？

很多人都这样做，但 React 做不到，因为它只在客户端上运行。只有服务器端语言可以调整图像的大小在传送到客户端之前。

【参考方案1】：

next/image 在您请求时将图像更改为 WebP 格式。 WebP 格式在保持质量的同时减小了图像的大小。

如果用户看不到您的整个页面，它也会生成lazy loading。

【讨论】：

感谢您的回答。

【参考方案2】：

基本上，优化您的图像需要繁重的工作。文档say：

自动图像优化允许在浏览器支持时以现代格式（如 WebP）调整图像大小、优化和提供图像。这避免了将大图像传送到具有较小视口的设备。它还允许 Next.js 自动采用未来的图像格式并将它们提供给支持这些格式的浏览器。

因此您不必担心用户浏览器是否支持新的图像格式，如 web/p，nextjs 会自动为所有用户创建优化图像加载设备高度和宽度，包括用于旧版浏览器的备用格式，如 jpgs。

它们还优化了性能：

默认情况下，图像是延迟加载的。这意味着您的页面速度不会因视口之外的图像而受到惩罚。图像在滚动到视口时加载。

并关心SEO：

图像始终以避免累积布局移位的方式呈现，这是 Google 将在搜索排名中使用的核心网络关键。

总之，使用 next/image 将通过部署各种技术来改进图像处理，从而大大简化您的生活。它可能不适用于每个图像，但在这种情况下，您可以使用普通的<img /> 标签并手动优化它。但这将是一个极端情况。

【讨论】：

感谢您的回答。