蜂窝网络下移动端浏览器是否会使用srcset节省带宽？

你完全不能依赖srcset自动完成蜂窝网络、低数据模式下的带宽节省逻辑，目前没有任何主流浏览器实现了基于网络状态、省流开关自动选择更低分辨率srcset资源的特性。

具体事实说明 #

• srcset的原生设计目标，是根据设备像素密度（DPR）、图片在页面上的实际渲染尺寸选择匹配精度的图片，避免下载比显示需求大的多余资源，这套选型逻辑从规范定义开始就没把网络类型、用户的省流偏好纳入判断维度。
• 针对你提到的iPhone Safari低数据模式场景：从iOS 15到最新的iOS 17版本实测，哪怕开了低数据模式、用蜂窝移动网络，Safari依然会按设备DPR选对应分辨率的图片，不会主动降档选更低分辨率的资源。安卓端的Chrome、系统自带浏览器目前也都没有实现这类自动降档逻辑。
• 只有部分安卓浏览器的“极限省流”模式会强制拦截高分辨率图片、直接加载最低分辨率资源，但这是浏览器代理层的强制行为，和srcset本身的逻辑无关，行为不可控，前端无法预判也没法做精准适配。
• 相关规范确实有计划把网络状态、用户省流偏好纳入响应式图片的判断依据，但目前没有主流浏览器落地，至少两三年内不能作为生产环境可依赖的特性。

落地建议 #

针对你服务带宽受限用户的需求，直接做显式交互即可：

• 默认加载匹配当前设备显示需求的标准分辨率图片
• 在图片旁增加明确的「查看高分辨率渲染图」按钮，用户主动点击后再加载高分辨率资源
• 如果你需要做更精细化的体验，可以用navigator.connectionAPI做辅助判断，如果检测到用户处于慢网络、开启了省流模式，默认直接加载低分辨率版本，同时保留手动加载高清图的入口即可。

注意：不要把navigator.connection的检测结果作为唯一判断依据，iOS Safari全版本不支持这个API，必须给所有用户保留手动切换高清图的入口，避免iOS端省流用户加载不必要的大资源。

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