为 Nextjs 的图像提供源的最佳方式是啥？

Posted 2023-03-06

【中文标题】为 Nextjs 的图像提供源的最佳方式是啥？

【英文标题】：What is the best way to provide source to Nextjs' Image?为 Nextjs 的图像提供源的最佳方式是什么？

【发布时间】：2022-01-07 20:37:19

【问题描述】：

我正在开发一个包含大量图片的网站 (Nextjs)。所以为了有更好的性能，图像优化是必不可少的。我检查并看到 nextjs 的 Image 组件从 srcset 中的图像产生了许多质量和大小。此外，我的 CDN 提供查询参数来获取特定质量和大小的图像。我认为最好的方法是在 CDN 中制作 webp 图像并将其与 Next.js 的 Image 组件一起使用。但是如果用户浏览器不支持 webp，Image 组件会做什么呢？它可以自动将其转换为jpg吗？ 是使用 Nextjs Image 组件的图像优化还是提供 loader prop 并使用 CDN 优化？

【问题讨论】：

next/image 的默认加载器会自动检测浏览器支持的图像格式。见next/image Acceptable Formats。

【参考方案1】：

您可以使用 next/image 组件。它有最好的图像优化工具。它还可以优化您的本地或 CDN 图像。我可以通过将尺寸缩小 20-60% 来优化图像，而不会降低图像质量？

另一方面，如果您有其他格式的图像，例如 jpg、png、svg，那么您可以使用next-optimized-images。这与 next/image 组件相同..