next.js - 为什么我应该使用“下一个/图像”？

Question

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

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

Answer 1

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

如果用户看不到您的整个页面，它还可以进行延迟加载。

Answer 2

基本上，它需要从您那里优化图像的繁重工作。文档说：

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

所以你不必担心用户的浏览器是否会支持新的图像格式，比如web/p，nextjs会自动为所有设备的高度和宽度创建一个优化的图像加载，包括旧浏览器的jpg等后备格式。

它们还优化了性能：

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

并关心SEO：

图像总是以这样的方式呈现，以避免累积布局移位，这是谷歌将在搜索排名中使用的核心网络生命。

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