img标签srcset的sizes属性结合max-width与默认值不生效问题

你的核心错误是**sizes属性定义的图片渲染宽度和实际CSS显示宽度不匹配**，导致浏览器计算资源需求时出现偏差，最终总是加载高分辨率图片。

错误原因 #

srcset（带w描述符）和sizes的工作逻辑是：

1. 浏览器通过sizes确定图片在当前视口下的CSS渲染宽度
2. 用「渲染宽度 × 设备像素比（DPR）」计算所需的实际像素量
3. 在srcset中选择最接近（且不小于）该像素量的图片资源

你设置的sizes="(max-width: 1600px) 1100px, 2000px"存在两个问题：

1. 你的图片是full-width类，实际显示宽度是100vw（和视口同宽），但sizes却告诉浏览器图片要显示固定的1100px/2000px宽，两者完全不符
2. 当视口≤1600px时，浏览器会按1100px的渲染宽度计算像素需求，比如2倍屏（DPR=2）下需要1100×2=2200px，这时候2000w的资源比1100w更接近需求，因此会加载高分辨率图

正确实现方式 #

如果你希望视口宽度≤1600px时加载1100w的图，超过1600px时加载2000w的图，可以按以下方式调整：

写法1：匹配实际显示宽度的sizes

让sizes和图片的full-width样式对齐，浏览器会根据实际视口宽度自动匹配资源：

<img
  srcset="https://via.placeholder.com/1100x200 1100w, 
          https://via.placeholder.com/2000x400 2000w"
  sizes="100vw" 
  src="https://via.placeholder.com/300x400" class="full-width">

这种写法下，浏览器会根据视口宽度和DPR计算需求：

• 当视口宽度×DPR ≤1100时（比如1倍屏视口≤1100px，2倍屏视口≤550px），加载1100w的图
• 超过该阈值时自动切换到2000w的图

写法2：严格按视口1600px切换（忽略DPR）

如果想强制以1600px视口作为切换节点，不管设备像素比，用<picture>元素结合媒体查询是更直接的方式：

<picture>
  <source media="(max-width: 1600px)" srcset="https://via.placeholder.com/1100x200">
  <source srcset="https://via.placeholder.com/2000x400">
  <img src="https://via.placeholder.com/300x400" class="full-width">
</picture>

写法3：调整资源尺寸适配sizes逻辑

如果坚持用sizes的媒体查询逻辑，需要把低分辨率图的尺寸调整为能覆盖1600px视口的需求，比如换成1600w的图：

<img
  srcset="https://via.placeholder.com/1600x300 1600w, 
          https://via.placeholder.com/2000x400 2000w"
  sizes="(max-width: 1600px) 100vw, 100vw" 
  src="https://via.placeholder.com/300x400" class="full-width">

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