图片降级本质是开发者主动提供的fallback机制而非浏览器自动重试，需用onerror手动替换src或picture/source做格式适配，且须防循环错误、确保fallback资源可用。
图片降级的本质是 fallback 而非加载失败重试
HTML 中没有“图片降级管理”这个标准概念，所谓降级，实际是指当 <img> 的 src 不可访问（404、跨域拒绝、网络中断）时，浏览器不会自动尝试其他地址——它只会显示破损图标或空白。真正常见的“降级”其实是开发者主动提供的备用方案，核心在于**用更可控的方式覆盖默认行为**。
关键判断：如果你期望“一张图加载失败就自动换另一张”，必须靠 JS 拦截错误并手动替换 src，纯 HTML 无法做到。
用 onerror 实现最简 fallback
这是最直接、兼容性最好的方案，适用于静态资源路径已知、降级目标明确的场景（比如默认头像、占位图）。注意：onerror 只在当前 src 加载失败时触发一次，且需防止循环错误（例如 fallback 图也 404）。
- 必须在
onerror中重新赋值this.src，否则无效果 - fallback 图地址应确保稳定可用，建议使用绝对路径或 CDN 上的兜底图
- 若 fallback 图也失效，会再次触发
onerror，导致无限循环；需加 guard 条件，例如：<img src="user.jpg" onerror="if (!this.src.includes('placeholder')) this.src='placeholder.png'">
用 <picture> + <source> 做格式/分辨率降级
这不是应对加载失败，而是响应式资源选择：浏览器根据 media、type 或 sizes 自动选最匹配的源。它不解决 404，但能避免因格式不支持（如 Safari 不支持 AVIF）导致的空白。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
-
<source>按顺序匹配，第一个满足条件的生效；不满足则回退到<img>的src - 务必保留底部的
<img>标签，它是所有浏览器的最终 fallback（包括不支持<picture>的旧浏览器） - 示例：
<picture> <source type="image/avif" srcset="photo.avif"> <source type="image/webp" srcset="photo.webp"> <img src="photo.jpg" alt="描述"> </picture>
现代方案：用 loading="lazy" 和 decoding="async" 配合 JS 控制加载节奏
严格来说这不算“降级”，但能显著降低首屏失败率：延迟加载非视口图片，异步解码避免主线程阻塞。配合 JS 错误监听，可实现更精细的资源调度。
-
loading="lazy"对<img>生效，但需注意 Safari 15.4+ 才完全支持，旧版需 polyfill -
decoding="async"让浏览器在后台解码，尤其对大图有明显性能收益 - 真正要做“智能降级”（比如先加载低质量图再替换高清图），得用
IntersectionObserver+fetch()+URL.createObjectURL()组合，此时onerror仍需保留作为兜底
最容易被忽略的一点：CDN 缓存策略会影响降级效果。如果 404 的图片被 CDN 缓存了，onerror 会反复触发却始终加载不到 fallback——得确认 CDN 对 404 响应不缓存，或给 fallback 图加版本参数，比如 placeholder.png?v=2。
