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

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

怎么判断 WebP 是否可用

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" 是否生效

加了 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 / srcset 是否安全使用

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

立即学习“前端免费学习笔记（深入）”；

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

真正容易被忽略的点是：降级不是“功能开关”，而是“资源链路完整性”。只要任意一环（src、type、loading、media）失效且无备用路径，用户看到的就是空白或损坏图像，而不是“退化为普通图”。检测必须对应到具体特性，而不是泛泛判断“浏览器是否太老”。