您可以在next.config.js中配置deviceSizes属性以匹配应用中使用的断点，因为这些断点用于生成next/image的srcset s，并提供正确大小的图像。
如果您知道用户的预期设备宽度，则可以使用next.config.js中的deviceSizes属性指定设备宽度断点列表。当next/image组件使用layout="responsive"或layout="fill"时，将使用这些宽度来确保为用户的设备提供正确的图像。
如果渲染的图像占用的宽度小于整个视口宽度，则应将上述内容与next/image上的sizes属性配对。
如果您使用的是layout="fill"、layout="responsive"或layout="raw"，则必须为任何占用小于整个视口宽度的图像分配sizes。
例如，当父元素将图像约束为始终小于视口宽度的一半时，使用sizes="50vw"。如果没有sizes，图像将以两倍于所需分辨率的分辨率发送，从而降低性能。
例如，假设您的应用使用以下设备断点[320, 640, 1024, 1280, 1920]，并且您正在渲染240x240图像。
更新deviceSizes属性以匹配断点：

// next.config.js
module.exports = {
    images: {
        deviceSizes: [320, 640, 1024, 1280, 1920],
        // Other existing `images` configs
    },
    // Other existing configs
}

然后在next/image上设置sizes属性，以建议理想的图像大小。

<div style={{ position: 'relative', width: 240, height: 240 }}>
    <Image
        src="<image-url>"
        layout="fill"
        sizes="50vw"
    />
</div>

您应该调整上述值以更好地适应您的用例。