Next.js 和 imgix 图像优化不知道它的大小
Next.js and imgix image optimisation without knowing its size
我需要在静态构建的 Next.js 网站上渲染图像，我想根据当今的最佳实践来完成。
我看到 Next.js 包括 next/Image，它负责大多数开箱即用的优化。鉴于我不会以多种尺寸保存图像，我正在寻找 imgix 来为我做这件事。
我是如何设想这个设置的，我将所有图像转储到一个 S3 存储桶中（我只知道文件名），imgix 将使用该存储桶。给定文件名和宽度要求，然后我会把它留给 next/Image 通过其 imgix 加载器调整大小和渲染图像。
我感到困惑的地方是，Next.js 文档 mention 宽度和高度都应该事先知道。如果我只向 imgix 提供宽度并让它执行其调整大小魔法，我怎么知道高度？
我确定我在这里遗漏了一些明显的东西，但是非常感谢您的指点。
一点免责声明，我在 imgix 工作。
希望我能通过概述您提到的某些事情的责任来澄清：
Next.js 负责 text/html/dom manipulation/more（即在 markup/html/etc 中放置具有适当属性的 img 标签。）
imgix 负责所有图像处理（即与您描述的差不多，s3 => request a specific size => done）
devs/designers负责页面布局（例如css，总体html结构）
Next.js 文档中的 linked section 很好地解释了布局偏移以及如何避免它（这对您来说可能是也可能不是问题）。
图片的高度（和宽度）由页面布局决定。例如，您设计了一个显示统一大小图像的图库（即每个图像上方为行顶部，下方为行底部，left/right 为列）。
How would I know the height if I only provide the width to imgix and let it do its resize magic?
了解图像尺寸 are/should 的一种方法是让设计师告诉您它们应该是什么。我们中的许多人都没有那么幸运，所以如果 你是设计师 ，一旦你对你的布局感到满意，你可以检查渲染图像的 width/height 然后使用它为 Next.js 组件提供 width/height 属性的信息。
他们还指定了第三个选项，其中涉及使用“layout="fill" 使图像扩展以填充其父元素。”如果您选择第三个选项，请记住“使用 layout='fill' 时，父元素必须具有 position: relative”。“=17=”
同样，这都是在避免布局偏移的情况下进行的。如果你指定图像的宽度到 imgix 高度将根据原始图像的纵横比计算。您还可以指定 aspect ratio 以及其他参数以获得所需的效果。
据我在文档 here and know from my projects, Next.js already does this using sharp 内部阅读，因此在使用 next/image 组件时始终为每个设备提供正确大小的图像。无需拥有不同尺寸的图像。
文档中的相关部分
Image 组件内置的一些优化包括：
改进的性能：始终使用现代图像格式为每个设备提供正确大小的图像。
视觉稳定性：自动防止累积布局偏移。
更快的页面加载：图像仅在进入视口时加载，带有可选的 blur-up 占位符
资产灵活性：On-demand 调整图像大小，即使对于存储在远程服务器上的图像也是如此
我最终在构建时上传到 imgix，这也会 return 我图像的尺寸。根据这些我计算出比率，并根据该比率和所需的宽度，我也可以计算出高度。
我需要在静态构建的 Next.js 网站上渲染图像，我想根据当今的最佳实践来完成。
我看到 Next.js 包括 next/Image，它负责大多数开箱即用的优化。鉴于我不会以多种尺寸保存图像，我正在寻找 imgix 来为我做这件事。
我是如何设想这个设置的，我将所有图像转储到一个 S3 存储桶中（我只知道文件名），imgix 将使用该存储桶。给定文件名和宽度要求，然后我会把它留给 next/Image 通过其 imgix 加载器调整大小和渲染图像。
我感到困惑的地方是，Next.js 文档 mention 宽度和高度都应该事先知道。如果我只向 imgix 提供宽度并让它执行其调整大小魔法，我怎么知道高度？
我确定我在这里遗漏了一些明显的东西，但是非常感谢您的指点。
一点免责声明，我在 imgix 工作。
希望我能通过概述您提到的某些事情的责任来澄清：
Next.js 负责 text/html/dom manipulation/more（即在 markup/html/etc 中放置具有适当属性的 img 标签。）
imgix 负责所有图像处理（即与您描述的差不多，
s3 => request a specific size => done）devs/designers负责页面布局（例如css，总体html结构）
Next.js 文档中的 linked section 很好地解释了布局偏移以及如何避免它（这对您来说可能是也可能不是问题）。
图片的高度（和宽度）由页面布局决定。例如，您设计了一个显示统一大小图像的图库（即每个图像上方为行顶部，下方为行底部，left/right 为列）。
How would I know the height if I only provide the width to imgix and let it do its resize magic?
了解图像尺寸 are/should 的一种方法是让设计师告诉您它们应该是什么。我们中的许多人都没有那么幸运，所以如果 你是设计师 ，一旦你对你的布局感到满意，你可以检查渲染图像的 width/height 然后使用它为 Next.js 组件提供 width/height 属性的信息。
他们还指定了第三个选项，其中涉及使用“layout="fill" 使图像扩展以填充其父元素。”如果您选择第三个选项，请记住“使用 layout='fill' 时，父元素必须具有 position: relative”。“=17=”
同样，这都是在避免布局偏移的情况下进行的。如果你指定图像的宽度到 imgix 高度将根据原始图像的纵横比计算。您还可以指定 aspect ratio 以及其他参数以获得所需的效果。
据我在文档 here and know from my projects, Next.js already does this using sharp 内部阅读，因此在使用 next/image 组件时始终为每个设备提供正确大小的图像。无需拥有不同尺寸的图像。
文档中的相关部分
Image 组件内置的一些优化包括：
改进的性能：始终使用现代图像格式为每个设备提供正确大小的图像。
视觉稳定性：自动防止累积布局偏移。
更快的页面加载：图像仅在进入视口时加载，带有可选的 blur-up 占位符
资产灵活性：On-demand 调整图像大小，即使对于存储在远程服务器上的图像也是如此
我最终在构建时上传到 imgix，这也会 return 我图像的尺寸。根据这些我计算出比率，并根据该比率和所需的宽度，我也可以计算出高度。