使用sizes和fill属性的Next Image检查面板srcset文件大小一致问题

为什么缩放窗口后srcset显示的文件大小不变？ #

浏览器DevTools元素面板里的srcset列表，是Next.js预先生成的所有候选图片的集合信息，它不会随着窗口缩放实时更新显示当前加载的图片大小——你看到的“大小一致”只是初始生成的所有备选图的固定信息，不是当前实际加载的图片状态。

怎么确认当前实际用的是哪张图？ #

• 用Network面板：打开DevTools → 切换到Network面板 → 筛选“Images”类型。缩放窗口后刷新页面（或触发组件重渲染），查看新加载的图片资源的URL、尺寸和大小，这就是当前宽度下实际加载的图。
• 查看currentSrc属性：在Elements面板找到对应的<img>标签，查看它的currentSrc属性，这个值就是浏览器当前正在使用的图片URL，直接对应srcset里的候选资源。

关于sizes属性的说明 #

你设置的sizes='10vw'是告诉浏览器：该图片在页面中占视口宽度的10%，浏览器会结合这个值和设备像素比（DPR）计算所需的图片宽度，再从srcset里挑选最合适的资源。修改sizes后文件大小变化，是因为Next.js根据新的尺寸规则重新生成了匹配的候选图，浏览器也会基于新规则选择不同的图。

额外排查建议 #

• 确认你的MediaLoader组件正确封装了next/image，没有错误覆盖srcset、sizes等核心属性。
• 检查浏览器缓存：如果之前加载过某尺寸的图，缩放后可能直接用缓存，不会重新请求。可以在Network面板勾选“Disable cache”后再测试。

内容的提问来源于stack exchange，提问作者Владимир Мигаль