已设置srcset及sizes属性的img标签为何未在指定宽度下切换对应尺寸图片

1. sizes语法错误直接导致规则失效 #

你写的sizes属性有两个语法问题，最终会让Chrome直接跳过所有自定义规则：

• 属性值末尾多了一个无效的尾随逗号
• 最后一条规则依然绑定了max-width: 2000px的媒体查询，没有设置无媒体查询的默认兜底长度

当sizes属性的解析遇到格式错误时，Chrome不会抛出任何控制台报错，只会默默执行fallback逻辑：把图片的渲染宽度默认按100%视口宽度计算，完全无视你写的所有媒体匹配规则。
这刚好和你观察到的异常表现完全匹配：

• 视口宽度小于250px时，按100vw算出的图片渲染宽度约240px，搭配普通移动设备DPR≈1.33，需要的图片像素宽度约320px，自然会加载320.jpg
• 视口宽度460px时，按100vw算出的渲染宽度为460px，搭配常见的2倍DPR屏幕，需要的图片像素宽度约920px，会自动匹配srcset里大于该值的最小选项（也就是1280w对应的图），加载1280.jpg

2. 对srcset w描述符的运行逻辑存在认知偏差 #

很多开发者会误以为srcset里的w值是和视口宽度绑定的切换阈值，实际的运行逻辑和这个理解完全不一样：

带w描述符的srcset，从来不会直接根据视口宽度匹配资源。它的完整运行流程是：

1. 先通过sizes规则，计算当前场景下图片最终会渲染的CSS宽度
2. 把这个CSS宽度乘以当前设备的像素比（DPR，普通屏为1，Retina屏为2/3等），得到浏览器实际需要的图片像素总宽度
3. 在srcset的所有资源里，找w值大于等于这个需求宽度的最小资源加载

举个例子：如果sizes规则算出当前图片要渲染320px的CSS宽度，在DPR=2的设备上，实际需要的图片像素宽度是640px，这时候才会加载640.jpg，而不是你以为的视口到了480px就固定加载320的图。

1. 修正sizes的语法问题：
   • 删除属性值末尾的多余逗号
   • 把最后一条带媒体查询的规则改成无筛选的默认长度值，保证任意视口宽度下sizes都能匹配到有效规则，不会触发解析失败的fallback
2. 补充对应的CSS宽度约束：
   sizes的作用只是提前给浏览器告知图片的预期渲染宽度，如果实际CSS布局导致图片渲染宽度和sizes声明的宽度偏差太大，依然会出现资源选择和预期不符的问题，需要给img元素加上和sizes规则匹配的宽度样式。
3. 实际验证时，可以打开Chrome DevTools：
   • 用Network面板过滤图片资源，查看不同视口下实际加载的图片尺寸
   • 用Elements面板的Computed栏，查看选中img元素的实际sizes计算值，确认和预期是否一致

<img src="im2/1280.jpg"
    srcset="im2/120.jpg 120w, 
            im2/320.jpg 320w, 
            im2/640.jpg 640w,
            im2/1280.jpg 1280w,
            im2/1920.jpg 1920w"
    sizes="(max-width: 250px) 120px,
           (max-width: 480px) 320px,
           (max-width: 720px) 640px,
           (max-width: 1400px) 1280px,
           1920px" 
    alt="Image description">

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