我需要在我的静态构建的 Next.js 网站上渲染图像，我想按照今天的最佳实践来做。
我已经看到 Next.js 包含了开箱next/Image即用的大部分优化。鉴于我不会以多种尺寸保存图像，我正在寻找 imgix 为我做这件事。
我对这个设置的设想是，我将所有图像转储到一个 S3 存储桶中（我只知道文件名），imgix 将使用它。给定文件名和宽度要求，然后我会next/Image通过它的 imgix 加载器来调整和渲染图像的大小。
我感到困惑的是，Next.js 文档提到宽度和高度都应该事先知道。如果我只向 imgix 提供宽度并让它发挥其调整大小的魔力，我怎么知道高度？
我确信我在这里遗漏了一些明显的东西，但我们将不胜感激。
一点免责声明，我在 imgix 工作。
希望我可以通过概述您提到的一些事情的责任来澄清：
Next.js 负责 text/html/dom 操作/more（即在 markup/html/etc 中放置具有适当属性的 img 标签）
imgix 负责所有图像处理（即与您描述的差不多，s3 => request a specific size => done）
开发人员/设计师负责页面布局（例如 css、整体 html 结构）
Next.js 文档中的链接部分很好地解释了布局偏移以及如何避免它（这对您来说可能是也可能不是问题）。
图片的高度（和宽度）由页面布局决定。例如，您设计了一个显示统一大小图像的图像库（即，每个图像的上界是行的顶部，下界是行的底部，左/右是列）。
如果我只向 imgix 提供宽度并让它发挥其调整大小的魔力，我怎么知道高度？
了解您的图像尺寸是/应该是什么的一种方法是让您的设计师告诉您它们应该是什么。我们中的许多人都没有那么幸运，所以如果您是设计师，一旦您对布局感到满意，您可以检查渲染图像的宽度/高度，然后使用该信息为 Next.js 提供宽度/高度属性零件。
他们还指定了第三个选项，其中涉及使用“layout="fill"导致图像扩展以填充其父元素”。如果您确实使用第三个选项，请记住“使用layout='fill'时，父元素必须具有position: relative.”。
同样，这一切都在避免布局转移的范围内。如果你指定图像的宽度来 imgix 高度将根据原始图像的纵横比计算。您还可以指定纵横比以及其他参数以获得所需的效果。
我最终在构建时上传到 imgix，这也会返回图像的尺寸。基于这些我计算出的比率，并基于它和所需的宽度，我也可以计算出高度。