我是NextJS的新手，但我在ReactJS和Webpack方面有很好的经验。我的问题是NextJS提供了一个'next/image'包。我想知道或非常深入地理解为什么我应该使用他们的包来加载一个没有默认img标签的图像。
在他们的文档中，他们说了一句类似We can serve an optimized image like so的话。他们所说的Optimized Image是什么意思？为什么ReactJS或任何其他包不这么做？
基本上，它承担了优化图像的重任。医生说：
自动图像优化允许在浏览器支持的情况下以WebP等现代格式调整图像大小、优化和提供图像。这避免了将大图像运送到视口较小的设备。它还允许Next.js自动采用未来的图像格式，并将其提供给支持这些格式的浏览器。
因此，您不必担心用户浏览器是否会支持新的图像格式，如web/p，nextjs将自动为所有设备高度和宽度创建一个优化的图像负载，包括用于旧浏览器的jpgs等回退格式。
它们还优化了性能：
默认情况下，图像是延迟加载的。这意味着你的页面速度不会受到视口外图像的影响。图像在滚动到视口时加载。
并关心SEO:
图像的渲染方式总是避免累积布局偏移，这是谷歌将在搜索排名中使用的核心Web重要功能。
总之，使用next/image将通过部署各种技术来改进图像处理，使您的生活变得更加轻松。它可能不适用于每个图像，但在这种情况下，您可以使用普通的<img />标签并手动优化它。但这将是一个边缘案例。
next/image在您请求时将图像更改为WebP格式。WebP格式在保持图像质量的同时减小了图像的大小。
它还使得懒惰加载，如果用户看不到你的整个页面，这是很好的。