Nextjs 优化图像组件的“imageSizes”配置选项实际上有什么作用？

Question

我一直在使用 Next.js 新的优化图像组件，我想我了解它在使用不同布局选项（intrinsic、fixed和responsive）时的工作原理fill。但是有一个配置选项imageSizes我不明白。

从文档中，我可以看出有以下两个默认配置选项：

module.exports = {
  images: {
    deviceSizes: [640, 750, 828, 1080, 1200, 1920, 2048, 3840],
    imageSizes: [16, 32, 48, 64, 96, 128, 256, 384],
  },
}

如果我理解正确的话，devicesSizes它是一系列断点；当对图像使用fill或responsive布局时，Nextjs 会创建宽度与断点相对应的图像的多个版本，并在srcset为该图像自动生成的 中引用这些版本。我们还可以通过 prop 告诉浏览器如何使用这些版本sizes。例如：

<Image 
    image={ image }
    layout="responsive" 
    sizes="(max-width: 500px) 100vw, 25vw" 
    width={1200}
    height={960}
/>

对于imageSizes，文档说：

您可以使用 imageSizes 属性指定图像宽度列表。这些宽度应该不同于（通常小于）deviceSizes 中定义的宽度，因为数组将被连接。当下一个/图像组件使用layout =“fixed”或layout =“intrinsic”时，将使用这些宽度。

这是否意味着，当使用fixedorintrinsic布局时，Nextjs 创建图像的多个版本，其宽度对应于 中的值imageSizes？如果是这样，您如何告诉<Image />组件使用哪一个（因为文档还说该prop 应该仅与和布局一起size使用）？fillresponsive

换句话说，如果我有一个 1200px 宽的图像，并且我想以 中指定的尺寸之一使用它imageSizes，我该怎么做？

Answer 1

你不选择。

算法会根据场景为你选择...

您必须意识到的第一件事是，一组 (deviceSizes) 用于大图像和两种布局：填充和响应式：另一组用于小图像 (imageSizes) 和最后两个布局：固定和本质。

让我们运行一些测试，看看结果：

下一个配置：

images: {
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes:  [32,  64,  96,  128,   256],
}

组件配置：

images: {
    deviceSizes: [640, 750, 828, 1080, 1200],
    imageSizes:  [32,  64,  96,  128,   256],
}

这是结果：

originImage: 1475w x 1180h (jpg)

viewport:    1100w
1 and 2: 1200w x 960h 
3 and 4: 250w x 205h

viewport:    900w
1 and 2: 1080w x 864h 
3: 256w x 205h
4: 96w x 77h

viewport:    700w
1 and 2: 640w x 512h 
3: 256w x 205h
4: 96w x 77h

你有看到？根据图像与相应配置的范围，您会得到不同的结果。

很难猜测它将是什么选择。得到了 900w 视口和 1080w 图像（视口大小上面的选择）。700 的图像比视口小。

您没有精确选择图像，但这并不意味着您没有太多控制权。

感谢@bobarrosGithub 上的回答： https: //github.com/vercel/next.js/discussions/24771