Chromium浏览器srcset与sizes图片选择异常问题咨询

我们的img标签配置如下：

• sizes="420px"
• srcset="https://images.simedia.cloud/eassistant/originals/500x334/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 500w,https://images.simedia.cloud/eassistant/originals/600x400/3090_30bfb97ab7a849a3896d295f0a57bbfc.jpg 600w"

使用环境：27英寸2560x1440分辨率显示器，Windows缩放设置为125%，Firefox、Chrome/Chromium内核Edge的window.devicePixelRatio均为1.25。

按计算，图片显示宽度420px × 设备像素比1.25 = 525px，理论上应该选择600w的图片，但Chrome/Edge实际选择了500w的资源导致模糊，Firefox则选择正确。请问这是配置错误还是Chromium的Bug？

问题分析与解答 #

你的srcset/sizes配置逻辑完全正确：sizes明确了图片的显示宽度，结合设备像素比计算出的525px需求，600w的资源是最匹配的选项。

这种差异属于Chromium内核浏览器的已知行为偏差，并非你的配置问题。Chromium在srcset资源选择时，会加入启发式规则（比如考虑网络状况、历史加载数据等），有时会优先选择更小的资源——但在固定高DPI的桌面场景下，这种选择不符合预期，属于Chromium的适配缺陷。

可以尝试以下两种方式验证或解决：

1. 给img标签添加明确的width和height属性：比如width="420"、height="280"（匹配600x400的比例），帮助Chromium更准确判断所需的资源尺寸。
2. 调整srcset的资源档位：比如新增一个550w的资源，让Chromium能匹配到更贴合需求的选项，这属于临时的 workaround。

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