图片降级生效需结构、顺序、MIME类型、兜底路径四者严丝合缝：type必须写标准值（如image/webp）、服务器Content-Type须完全匹配、<source>须按AVIF→WebP→JPEG顺序排列、<img src>必须为静态可直访的JPEG/PNG且不可带参数，任一错误均导致旧浏览器白屏。
为什么写了但没生效
浏览器只按顺序检查 <source>：满足 type 支持 + 资源可解码，就停；否则跳过，不报错也不提示。常见失效原因包括：
• type="image/webp" 写成 type="webp" 或 type="image/jpg"（正确应为 image/jpeg）
• 服务器返回 WebP 文件，但响应头 Content-Type 是 image/jpeg，浏览器校验失败
• <source> 放在 <img> 后面，或漏掉 <img> 标签本身
• srcset 地址 404，但浏览器不触发 onerror（它只监听 <img> 的 src）
picture 中 img 的 src 必须静态可用
<img> 不是“备用格式”，而是最终渲染载体和语义锚点。它的 src 必须：
• 指向一个真实可访问的 JPEG/PNG（如 /img/logo.jpg），不能是动态地址（如 /api/image?format=webp）
• 禁止带查询参数（logo.jpg?x-oss-process=... 在 Safari 中可能返回 406）
• 能单独粘贴到浏览器地址栏打开并显示正常图片
• 开发时建议用 CDN 托管的占位图（如 https://cdn.example.com/placeholder.svg），避免本地相对路径部署失效
onerror 只对 <img> 的 src 生效，且必须内联切断
<source> 加载失败不会触发任何事件；只有 <img> 的 src 请求失败（非 2xx、网络中断等）才会进 onerror。可靠写法是：
• 必须内联：onerror="this.src='/img/fallback.png'; this.onerror=null;"
• 更稳妥加判断：onerror="if (!this.src.includes('fallback')) this.src='/img/fallback.png'; this.onerror=null;"
• 若连 fallback 都不可信，直接内联 base64：onerror="this.src='data:image/svg+xml;base64,PHN2Zy...'; this.onerror=null;"
• 动态创建的 <img>，onerror 必须在 appendChild() 前绑定，否则首次错误捕获不到
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
AVIF → WebP → JPEG 的顺序不能反
格式降级本质是优先级队列，不是“多选一”：
• 正确顺序：<source type="image/avif"> → <source type="image/webp"> → <img src="fallback.jpg">
• AVIF 放最前：Chrome 120+/Firefox 120+/Edge 120+ 可用，旧 Safari 自动跳过
• WebP 次之：覆盖 iOS 14+、Android 4.0+、全部主流桌面浏览器
• <img> 的 src 必须是 JPEG 或 PNG，且不能是 WebP 地址（否则旧浏览器照样白屏）
• 所有图片宽高、裁剪比例必须一致，否则格式切换时视觉跳变
立即学习“前端免费学习笔记（深入）”；
