<picture>必须包裹<source>，<source>需按AVIF→WebP→JPEG顺序排列且带标准type属性，底部<img>的src和alt不可省略；否则降级静默失效。
必须用 <picture> 包裹 <source>，<source> 必须带 type 属性且顺序为 AVIF → WebP → JPEG，底部 <img> 的 src 和 alt 不可省略——漏掉任一环节，降级就静默失效。
为什么 <source type="image/webp"> 写了却没加载 WebP
浏览器不是“看到 WebP 就用”，而是严格比对两个条件：该 <source> 的 type 值是否被支持 + 服务器返回的 Content-Type 响应头是否完全匹配。不一致就会跳过，且不报错、不 fallback。
-
type必须写标准 MIME 类型：image/webp✅，webp或image.webp❌ - Nginx / Apache 需显式配置
types { image/webp webp; }，否则 .webp 文件常被当成application/octet-stream - CDN 必须透传客户端的
Accept: image/webp请求头，否则后端无法判断能力，统一返回 JPEG - 本地双击打开 HTML 时，
file://协议下部分浏览器会忽略type判断，直接走<img>—— 这不是 bug，是协议限制，开发阶段务必用本地 server 测试
<source> 的顺序和 media 怎么配才真生效
<picture> 是从上到下逐条匹配，**第一个同时满足 media 条件且 type 可解码的 <source> 就加载，其余全部忽略**。顺序错了，再新的格式也压根不会触发。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 推荐顺序：
<source type="image/avif">→<source type="image/webp">→<source type="image/jpeg">（注意：JPEG 的 MIME 是image/jpeg，不是image/jpg） -
media优先用视口宽度，如(max-width: 768px)；少用(min-resolution: 2dppx)，Safari 和部分安卓 WebView 对它支持不稳定 - 不要把
<source type="image/jpeg">放在 WebP 前面——哪怕设备支持 WebP，也会永远加载 JPEG -
<img>不是第 N 个<source>，它是独立兜底节点；它的src必须指向一个真实可访问的静态图（如 CDN 占位图），不能是404.jpg或带查询参数的动态地址
<img> 的 onerror 怎么写才不循环崩溃
<source> 加载失败不会触发 onerror，只有 <img> 的 src 请求失败才会。但内联写法若不切断事件链，一次失败会反复触发自身，直到栈溢出。
立即学习“前端免费学习笔记（深入）”；
- 必须加
this.onerror=null，否则死循环：onerror="this.src='/fallback.jpg'; this.onerror=null;" - 更稳妥写法：先判断当前
src是否已是 fallback 地址，避免重复赋值：onerror="if (!this.src.includes('fallback')) this.src='/fallback.jpg'; this.onerror=null;" - 禁止用 JS 动态绑定
img.addEventListener('error', ...)：Safari 和旧 Edge 中该事件不冒泡也不稳定，内联是唯一可靠方式 - 如果连 fallback 图都不可信，可用 base64 占位：
onerror="this.src='data:image/svg+xml;base64,...'; this.onerror=null;"
路径和尺寸一致性这些细节最容易被忽略
所有格式图片（AVIF/WebP/JPEG）必须构图一致、尺寸一致。否则切换时会出现拉伸、裁剪偏移或视觉跳变——这不是降级问题，是设计缺陷。
- 路径必须全用正斜杠
/，相对路径以 HTML 文件所在目录为基准：./images/logo.webp✅，..images/logo.webp❌ - 所有
srcset中的图片宽高比必须相同；若用sizes="(max-width: 768px) 100vw, 50vw"，则对应srcset中的图必须按此渲染宽度提供，否则浏览器可能选错 - 首屏关键图建议直接写死
src，不加loading="lazy"；fetchpriority="high"只对<img>的src生效，对<source>无效 - 测试时务必在 Chrome DevTools Network 面板勾选 “Disable cache” 和 “Large rows”，看清实际加载的是哪个 URL 和响应体大小，光看页面显示正常没用
