我正在挣扎很多与NextJS图像组件加载图像在最有效的大小为不同的屏幕。
基本上发生的是：所有图像都以最大尺寸加载。
下面是一张图像，显示了所有屏幕尺寸下显示的分辨率，具有以下图像属性：

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

字符串
See the screenshot of the srcsets
我使用的主要策略是通过一个img容器在一个相对位置，如下所示：

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

型
下一个图像组件如下所示：

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

型
也尝试了图像组件：

<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}
        />

型
我还尝试了样式的组成部分和其他无数的大小变化。
下面是我的下一个.config：

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'],
    },

型