Next.js 13 Image组件无法按预期缩放图片求助

使用Next.js 13的Image组件时遇到问题：所有图片均加载其最大尺寸，无法根据不同屏幕尺寸加载最适配的版本。

以下是当前使用的Image组件属性，对应所有屏幕尺寸下显示最大分辨率的情况（有srcsets截图可佐证）：

alt="alt text"
sizes="(max-width: 486px) 90vw, 400px"
fill
priority={true}
placeholder="blur"

采用的图片容器为相对定位，样式如下：

position: relative !important;
width: 100%;
max-width: 1600px;

对应的Image组件完整代码：

<Image
  src={srcImg}
  alt="alt"
  sizes="(max-width: 486px) 90vw, 400px"
  fill
  priority={true}
  placeholder="blur"
/>

也曾尝试过以下配置的Image组件：

<Image
  src={src}
  alt="alt"
  sizes="(min-width: 520px) 400px, (min-width: 340px) calc(87.5vw - 38px), calc(-100vw + 560px)"
  placeholder="blur"
  priority={true}
  quality={80}
/>

除此之外，还尝试过给组件添加自定义样式以及多种sizes参数的变体，但问题依旧。

当前的next.js配置如下：

reactStrictMode: true,
swcMinify: true,
sassOptions: {
  includePaths: [path.join(__dirname, 'styles')],
  prependData: `
    @import "@/styles/variables.scss";
    @import "@/styles/scrollbar.scss";
  `,
},
images: {
  domains: ['xxx', 'xxx'],
  images: {
    formats: ['image/webp', 'png'],
  },
}

内容的提问来源于stack exchange，提问作者João Meira