浏览器无法用media属性识别4g/wifi，唯一可行方案是javascript读取navigator.connection.effectivetype或downlink动态设置图片src，需监听onchange并确保初始src为最小可用图。
浏览器本身不识别“4G”或“WiFi”这类网络制式，picture 和 srcset 无法直接根据网络类型切换图片——这是个常见误解。真正能用的信号只有 navigator.connection.effectiveType（如 "4g"、"3g"、"slow-2g"），但它只能在 JavaScript 中读取，不能用于 HTML 声明式逻辑。
为什么不能用 media 属性判断 4G/WiFi
media 属性只支持 CSS 媒体查询（如 (max-width: 768px)、(min-resolution: 2dppx)），它没有 (network: 4g) 这种语法。所有声称“用 <source media="(network: 4g)"></source> 实现网络适配”的写法都是无效的，浏览器会直接忽略该 <source></source>。
- 实际测试中，含非法
media值的<source></source>不会报错，但也不会被匹配，浏览器跳过它继续往下找 - Chrome、Firefox、Safari 均未实现对网络类型作为媒体查询条件的支持（截至 2026 年 6 月）
- 即使未来标准加入，也需要配套的 UA 支持和用户授权，目前无落地路径
如何用 JavaScript 补足 network-aware 图片加载
必须用 JS 主动读取 navigator.connection.effectiveType 和 navigator.connection.downlink，再动态设置 <img src> 或替换 <picture></picture> 内容。这不是“增强”，而是唯一可行路径。
-
navigator.connection.effectiveType返回字符串："slow-2g"、"2g"、"3g"、"4g"，注意：它不区分 WiFi 和 4G，仅反映当前连接质量估算 -
navigator.connection.downlink返回 Mbps 数值（如1.5），更精细，但兼容性略差（Safari 16.4+ 才支持） - 必须监听
navigator.connection.onchange，因为网络类型可能在页面生命周期中变化 - 示例逻辑：
if (navigator.connection?.effectiveType === '4g') { img.src = '/img/photo-high.webp'; } else if (['2g', '3g', 'slow-2g'].includes(navigator.connection?.effectiveType)) { img.src = '/img/photo-low.jpg'; }
避免 fallback 失效的三个硬约束
当 JS 控制图片源时，<picture></picture> 的原有结构容易变成摆设。若没处理好，降级逻辑就断了。
- 不要删除或覆盖整个
<picture></picture>，而应只更新内部<img>的src，保留其alt和loading属性 - JS 加载前，
<img>的初始src必须指向一个最小可用图（如占位符或极低质图），否则首屏空白 - 如果用了
type="image/webp"的<source></source>，JS 设置的 URL 也得是 WebP，否则在不支持 WebP 的旧浏览器里会加载失败——要提前检测document.createElement('canvas').toDataURL('image/webp').indexOf('data:image/webp') !== -1
真正的难点不在“怎么写”，而在“什么时候写”：网络类型可能在图片开始加载后才确定，而浏览器的预加载器（preload scanner）早已发起请求。所以最稳妥的做法，是把关键图延迟到 DOMContentLoaded 后再由 JS 注入，或用 loading="lazy" 配合 IntersectionObserver 控制时机。否则，你精心写的降级逻辑，可能根本没机会生效。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
