如何让静态导入的Next.js Image组件拉取720px尺寸图片？

要在保留静态图片导入的前提下，让Next.js的Image组件生成w=720的图片URL，你可以通过以下方法实现：

方法一：修改Next.js配置（推荐） #

Next.js默认会根据内置的deviceSizes数组生成多尺寸的图片资源，其中包含1920这个宽度值，这就是你看到w=1920的原因。只需在next.config.js中重新定义deviceSizes，只保留你需要的720尺寸即可：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    deviceSizes: [720], // 仅生成720px宽度的图片版本
  },
};

module.exports = nextConfig;

修改完成后重启开发服务器，图片请求的URL参数就会变为w=720。

方法二：确认组件参数有效性 #

你的现有Image组件参数设置已经符合要求：

• width={720}和height={480}明确图片的显示尺寸
• sizes="720px"告知浏览器图片在布局中始终以720px宽度展示

配合方法一的配置，即可避免浏览器自动加载更大尺寸的图片资源。

内容的提问来源于stack exchange，提问作者user19666029