旧浏览器（ie8–ie11、safari ≤13.1、android 4.3 webview）不识别srcset和，会静默跳过整个结构，仅渲染末尾；因此降级依赖显式兜底：必须写出完整，url须可直访、无查询参数，且的type与服务器content-type须严格匹配（如image/webp），否则失效。
旧浏览器（IE8–IE11、Safari ≤13.1、Android 4.3 WebView）不识别 srcset 和 <picture></picture>，会静默跳过整个结构，只渲染末尾的 <img src> —— 所以降级不是“自动发生”，而是靠你把兜底写对、写稳、写死。
为什么 <picture></picture> 在 IE 里空白或只显示 alt 文字
IE8–IE11 完全不解析 <picture></picture> 标签，连子元素都当普通文本处理；只有最后那个独立的 <img> 能被识别。但很多人误以为“写了 <source></source> 就算有 fallback”，结果漏掉 <img>，或给它配了带查询参数的 src（如 logo.jpg?format=webp），导致 IE 加载 406 或空响应。
- 必须显式写出
<img src="fallback.jpg" alt="描述">，且该 URL 必须能直接在地址栏打开并显示图片 -
<img>的src不能是相对路径错误的地址（如../images/logo.jpg写成..images/logo.jpg） - 所有
<source></source>的type值必须严格匹配标准 MIME 类型：image/avif、image/webp、image/jpeg（不是image/jpg） - 服务器返回的
Content-Type响应头必须和type完全一致，否则 Safari/Chrome 也会跳过该<source></source>
onerror 内联写法必须加 this.onerror=null
onerror 不是“加载失败就执行一次”，而是在每次加载失败时反复触发——如果只写 onerror="this.src='/fallback.png'"，会立刻再次触发 onerror，形成死循环，直到栈溢出或浏览器终止。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 正确写法：
onerror="this.src='/img/placeholder.svg'; this.onerror=null" - 更稳妥写法（防 fallback 图也失效）：
onerror="if (!this.src.includes('placeholder')) this.src='/img/placeholder.svg'; this.onerror=null" - 绝对禁用动态绑定：
img.addEventListener('error', ...)在 Safari 和旧 Edge 中大概率不触发 - 内联写法只对网络请求失败有效；对空
src、CORS 拦截、200 占位图等场景完全静默
图片自身尺寸不一致导致切换时拉伸跳变
WebP 和 JPEG 文件即使看起来一样大，原始宽高比（intrinsic size）也可能不同：CMS 导出、tinypng 压缩、CDN 动态转码常会抹除 EXIF 宽高字段，让浏览器误判为“无尺寸”，退化成宽度撑满、高度塌陷。
- 用
file logo.webp或在线 EXIF 查看器确认logo.webp和logo.jpg的像素尺寸是否**逐像素一致** - 生成 JPEG 时强制写入宽高：
convert -resize 800x450\! input.png output.jpg - 补全缺失 EXIF：
exiftool -ImageWidth=800 -ImageHeight=450 logo.jpg - 无法统一元数据时，放弃依赖图片自身尺寸，改用 CSS 容器锁比例：
style="aspect-ratio: 16 / 9; object-fit: cover;"（Safari ≤15.2 需用padding-top降级）
旧浏览器里 <img> 默认行为引发 3px 间隙和蓝边
IE6–IE8 把 <img> 当作行内元素，默认 baseline 对齐，下缘留白；同时默认加蓝色边框（哪怕你写了 border: 0，IE 有时仍不生效）。
- 消除间隙：
img { display: block; }或vertical-align: top; - 清除蓝边：
img { border: none; }（border: 0在 IE6–IE8 中可能无效） - 避免用
background-position-x/background-position-y：IE7 不支持，必须合并写成background-position: 20px 10px或right top - 别在 IE8– 中用
calc()做背景偏移，它完全不识别
最容易被忽略的点是：所有降级逻辑都建立在 src 是真实可访问资源的前提下。一旦 src 指向一个 404 地址、空值、或需服务端协商的动态路径，整个链路就断了——连 onerror 都救不回来。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
