我需要在我的静态构建的Next.js网站上渲染图像，我想根据今天的最佳实践来做。
我已经看到Next.js包括next/Image它负责开箱即用的大部分优化。鉴于我不会有多种尺寸保存的图像，我正在寻找imgix来为我做这件事。
我设想的这种设置是，我将所有图像转储到 imgix 将使用的 S3 存储桶(我只知道文件名)中。给定文件名和宽度要求，我会让它next/Image通过其 imgix 加载器调整图像大小和渲染图像。
我感到困惑的是，下一个.js文档提到宽度和高度都应该事先知道。如果我只提供 imgix 的宽度并让它发挥调整大小魔法，我怎么知道高度？
我确定我在这里错过了一些明显的东西，但指针将不胜感激。
一点免责声明，我在imgix工作。
希望我能通过概述您提到的一些事情的责任来澄清：
-
接下来.js负责 text/html/dom 操作/更多(即在标记/html/等中放置具有适当属性的 img 标签)。
-
imgix负责所有的图像处理(即几乎如您所描述的，
s3 => request a specific size => done) -
开发人员/设计人员负责页面布局(例如.css整体HTML结构)
Next.js文档中的链接部分很好地解释了布局偏移以及如何避免它(这对您来说可能是也可能不是问题)。
图片的高度(和宽度)由页面布局决定。例如，您设计了一个图像库，用于显示统一大小的图像(即每个图像由行的顶部、行的底部和左/右的列包围)。
如果我只提供 imgix 的宽度并让它发挥调整大小魔法，我怎么知道高度？
了解图像尺寸的一种方法是让您的设计师告诉您它们应该是什么。我们中的许多人都没有那么幸运，所以如果你是设计师，一旦你对你的布局感到满意，你可以检查渲染图像的宽度/高度，然后使用该信息为Next.js组件提供宽度/高度属性。
他们还指定了第三个选项，涉及使用"layout="fill"，这会导致图像扩展以填充其父元素。 如果您确实使用第三个选项，请记住"使用layout='fill'时，父元素必须具有position: relative"。
同样，这一切都是在避免布局偏移的背景下进行的。如果指定图像的宽度以 imgix，将根据原始图像的纵横比计算高度。您还可以指定纵横比以及其他参数以获得所需的效果。
据我在这里的文档中阅读并从我的项目中了解到，Next.js 已经在内部使用 sharp 执行此操作，因此在使用组件时始终为每个设备提供正确大小next/image图像。无需具有不同大小的图像。
文档中的相关部分
Image 组件中内置的一些优化包括：
-
改进的性能：始终使用现代图像格式为每个设备提供正确大小的图像。
-
视觉稳定性：防止累积布局自动偏移。
-
更快的页面加载：图像仅在进入视口时加载，并带有可选的模糊占位符
-
资产灵活性：按需调整图像大小，即使对于存储在远程服务器上的图像也是如此
我最终在构建时上传到 imgix，这也将返回图像的尺寸。根据这些，我计算了比率，并基于该比率和所需的宽度，我也可以计算高度。