picture标签无法直接识别网络类型，仅能基于media、dppx或width等客户端特征选择图片源；可通过prefers-reduced-data媒体查询实现基础降级，或结合JavaScript检测effectiveType动态切换图片源。
picture 标签本身不识别网络类型（比如 2G/3G/4G/WiFi），它只根据 媒体查询（media）、设备像素比（dppx） 或 视口宽度（width） 等客户端特征来选择图片源，无法直接检测当前是蜂窝网络还是 WiFi。
用 media 和 srcset 模拟“按网络类型切换”的常见做法
虽然浏览器不暴露 network.type（如 navigator.connection.effectiveType），但可通过以下方式间接适配：
- 利用
prefers-reduced-data媒体查询（部分浏览器支持）——用户手动开启“节省数据”模式时生效 - 结合 JavaScript 检测
navigator.connection.effectiveType动态插入source或切换src - 服务端通过 UA + IP 地址等线索预判网络环境（需后端配合，不属于 picture 标签能力）
推荐：用 prefers-reduced-data + picture 实现基础降级
这是纯前端、声明式、无需 JS 的方案，兼容性较好（Chrome 76+、Safari 14.5+、Firefox 96+）：
<picture>
<source
media="(prefers-reduced-data: reduce)"
srcset="image-low.jpg"
type="image/jpeg">
<source
srcset="image-1x.jpg, image-2x.jpg 2x"
type="image/jpeg">
<img src="image-1x.jpg" alt="示例图片">
</picture>
当系统或浏览器设置启用“节省数据”时，优先加载低清图；否则加载高清图（支持 x2 像素密度）。
立即学习“前端免费学习笔记（深入）”；
进阶：JS 检测 effectiveType 后动态控制
若需更精准响应 2G/3G/4G/WiFi，可用 JS 获取网络质量并切换图片：
- 检查
navigator.connection?.effectiveType（返回 '2g'/'3g'/'4g'/'wifi'） - 为每个
picture添加 data 属性，如data-low-src="low.jpg" data-high-src="high.jpg" - JS 根据 effectiveType 设置
img.src或替换source的srcset - 监听
navigator.connection.onchange实时响应网络变化
注意点
实际部署时需留意：
-
navigator.connection在非安全上下文（HTTP）中可能不可用或返回 null - effectiveType 是估算值，不一定真实反映当前带宽，尤其在 WiFi 切换或信号波动时
- picture 的 fallback img 必须存在，且 src 应设为默认清晰度版本
- 低清图建议压缩至 WebP/AVIF 格式，并配合适当尺寸（如 640px 宽），而非简单缩放原图
