HTML怎么检测图片是否需要降级-html教程-PHP中文网

图片降级取决于环境是否支持特性，而非浏览器新旧；应检测source.type是否保留'image/webp'、'loading' in htmlimageelement.prototype等具体能力，并确保提供静态兜底资源。

html怎么检测图片是否需要降级

图片是否需要降级，不取决于“浏览器新旧”，而取决于当前环境是否支持它所依赖的特性。直接检测 srcset、type="image/webp" 或 loading="lazy" 这些特性是否存在，比查 UA 字符串或硬编码 IE 判断更可靠、更面向未来。

WebP 降级不是“要不要用”，而是“用了会不会白屏”。关键检测点是 HTMLPictureElement 是否支持 source[type] 匹配逻辑，以及是否能识别 image/webp MIME 类型：

仅靠 document.createElement('picture').supports 不行——它永远返回 undefined
正确方式是创建一个 source 元素，设 type="image/webp"，再检查其 type 属性是否被保留（而非清空或转成空字符串）：
```
const source = document.createElement('source');
source.type = 'image/webp';
const isWebPSupported = source.type === 'image/webp';
```
这个检测在 Safari 13.1+、Chrome 23+、Edge 79+ 返回 true；Safari 13.0 及更早、旧 Android WebView 返回 false，此时必须 fallback 到 <img src="xxx.png">

加了 loading="lazy" 却白屏？大概率是浏览器根本不认这个属性，或者你没给 src 提供 fallback 值。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

检测依据不是版本号，而是原生支持性：'loading' in HTMLImageElement.prototype —— Chrome 77+、Firefox 75+、Safari 15.4+ 返回 true；Android 9 系统 WebView、iOS 14.5 以下均返回 false
即使检测通过，也要确保 src 指向一个真实可加载资源（如占位图），否则降级路径就断了
不要依赖 JS 动态补 data-src：如果 JS 加载失败，src 为空 → 白屏。降级必须在 HTML 静态层面完成

<picture></picture> 结构本身不报错，但旧内核可能跳过整个块，导致图片完全不渲染。

旧 WebKit（如 iOS 12.4 Safari）会忽略 <source media></source> 中的媒体查询，只按顺序取第一个 source，哪怕 type 不支持
最稳的兜底策略：始终让最外层 <img src="fallback.jpg"> 的 URL 是真实可访问的，并且该图片格式（JPEG/PNG）被所有目标浏览器支持
避免混用 media 和 type 在同一个 <source></source> 里——某些旧浏览器解析失败时会丢弃整条 source，甚至中断后续节点解析