为什么要使用 'next/image'？
Why should I use 'next/image'?
我是 NextJS 的新手，但我在 ReactJS 和 Webpack 方面有很好的经验。我的问题是 NextJS 提供了一个包 'next/image'。我想知道或非常深刻地理解为什么我应该使用他们的包来加载没有默认 img 标签的图像。
在他们的文档中，他们说了这样一行 We can serve an optimized image like so。 Optimized Image 是什么意思以及为什么 ReactJS 或任何其他包不这样做？
next/image 在您请求时将图像更改为 WebP 格式。 WebP 格式在保持质量的同时减小了图像的大小。
这也使得 lazy loading 如果用户没有看到您的整个页面，这很好。
基本上，优化图像的重任由您承担。文档 say:
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
因此您不必担心用户浏览器是否支持新的图像格式，例如 web/p、nextjs将自动为所有设备的高度和宽度创建优化图像负载，包括后备格式，如 jpgs 用于旧浏览器。
他们还优化了性能：
Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
关心SEO:
Images are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.
总而言之，使用 next/image 可以部署各种技术来改进图像处理，从而使您的生活变得更加轻松。它可能不适用于每张图片，但在那种情况下，您可以使用普通的 <img /> 标签并手动优化它。但这将是一个边缘案例。
我是 NextJS 的新手，但我在 ReactJS 和 Webpack 方面有很好的经验。我的问题是 NextJS 提供了一个包 'next/image'。我想知道或非常深刻地理解为什么我应该使用他们的包来加载没有默认 img 标签的图像。
在他们的文档中，他们说了这样一行 We can serve an optimized image like so。 Optimized Image 是什么意思以及为什么 ReactJS 或任何其他包不这样做？
next/image 在您请求时将图像更改为 WebP 格式。 WebP 格式在保持质量的同时减小了图像的大小。
这也使得 lazy loading 如果用户没有看到您的整个页面，这很好。
基本上，优化图像的重任由您承担。文档 say:
The Automatic Image Optimization allows for resizing, optimizing, and serving images in modern formats like WebP when the browser supports it. This avoids shipping large images to devices with a smaller viewport. It also allows Next.js to automatically adopt future image formats and serve them to browsers that support those formats.
因此您不必担心用户浏览器是否支持新的图像格式，例如 web/p、nextjs将自动为所有设备的高度和宽度创建优化图像负载，包括后备格式，如 jpgs 用于旧浏览器。
他们还优化了性能：
Images are lazy loaded by default. That means your page speed isn't penalized for images outside the viewport. Images load as they are scrolled into viewport.
关心SEO:
Images are always rendered in such a way as to avoid Cumulative Layout Shift, a Core Web Vital that Google is going to use in search ranking.
总而言之，使用 next/image 可以部署各种技术来改进图像处理，从而使您的生活变得更加轻松。它可能不适用于每张图片，但在那种情况下，您可以使用普通的 <img /> 标签并手动优化它。但这将是一个边缘案例。