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

Question

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

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

Answer 1

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

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

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

他们还优化了性能：

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

并关心SEO：

图像总是以避免累积布局转变的方式呈现，这是谷歌将在搜索排名中使用的核心网络要素。

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

Answer 2

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

它还可以进行延迟加载，如果用户看不到整个页面，这非常有用。