HTML中利用picture标签实现低网速下的备用图自动展示-html教程-PHP中文网

标签本身不自动检测网速，需结合js读取navigator.connection.effectivetype动态切换img的src或data属性实现低网速fallback，同时注意webp兼容性与服务端网络提示头协同优化。

html中利用picture标签实现低网速下的备用图自动展示

picture 标签本身不自动检测网速，得靠 srcset + sizes + `media` 配合 JS 才能实现低网速 fallback

浏览器原生的 <picture></picture> 不会读取网络状况（比如 navigator.connection.effectiveType），它只按 media 查询条件或 srcset 的 DPR/宽度提示做静态选择。真要“低网速时自动切备用图”，必须手动介入。

常见错误是直接写：<source media="(max-width: 768px)" srcset="low.jpg"></source>——这只会响应屏幕尺寸，跟网速无关。

真正触发低网速逻辑，得先用 JS 检测 navigator.connection.effectiveType（值为 "2g"、"3g"、"4g" 或 "slow-2g"）
再动态修改 <picture></picture> 内部的 <source></source> 的 srcset 或切换 <img> 的 src
注意：IE 和部分旧版 Safari 不支持 navigator.connection，需降级兜底

推荐做法：用 JS 切换 `<img>` 的 `src`，而非重写整个 `<picture></picture>` 结构

直接操作 <img> 的 src 更轻量、兼容性更好，也避免重复解析 <source></source>。把高清图和低清图路径都提前存在 data 属性里：

<picture><source media="(min-width: 1024px)" srcset="hero-high.webp" type="image/webp"><source media="(min-width: 1024px)" srcset="hero-high.jpg" type="image/jpeg">
  @@##@@
</source></source></picture>

然后在加载后检查网速：

Wechat HTML Publisher

直接上传HTML富文本到微信公众号草稿箱。支持完整的HTML格式,无需Markdown转换。

下载

若 navigator.connection?.effectiveType === "2g" || "3g" || "slow-2g"，则把 <img src="hero-low.jpg" data-low-src="hero-low.jpg" data-high-src="hero-high.jpg" alt="活动主图"> 的 src 设为 data-low-src 的值
否则保持原 src，或设为 data-high-src
务必加 loading="lazy" 防止低网速下预加载高清图

别忽略 WebP 兼容性和 fallback 顺序

<source></source> 的顺序决定浏览器选用优先级：从上到下，第一个匹配且格式支持的生效。WebP 虽小但老版 iOS Safari（≤13.3）、IE 完全不支持，所以必须紧跟一个 JPEG/PNG fallback：

错误写法：<source srcset="a.webp" type="image/webp"><source srcset="b.jpg"></source></source> → 在不支持 WebP 的设备上，b.jpg 可能因缺少 media 或 type 被跳过
正确写法：每个 <source></source> 都带明确 media 和 type，最后用 <img> 保底
测试时用 Chrome DevTools 的 Network Conditions 模拟 Slow 3G 并禁用 WebP，确认最终加载的是 JPEG