Base64图片的正确data URL格式为data:<MIME类型>;base64,<编码字符串>，必须包含完整MIME类型（如image/png）、固定分隔符;base64,及无换行无空格的Base64字符串，缺一不可。
直接用 <img src="data:image/png;base64,..."> 就行，但要注意编码格式、长度限制和缓存失效问题。
Base64 图片的正确 data URL 格式长什么样
必须带完整的 MIME 类型和 base64, 分隔符，缺一不可。常见写错：漏掉 base64,、用错类型（比如把 jpg 写成 jpeg 但实际编码是 JPEG）、大小写混用（image/PNG 在某些旧浏览器会失败）。
正确示例：
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAA...">
错误示例（浏览器静默忽略或报 400）：
立即学习“前端免费学习笔记（深入）”；
<img src="data:image/png;iVBORw0KGgoAAAANSUhEUgAA..."> <img src="data:image/jpg;base64,/9j/4AAQSkZJRg...">
- MIME 类型要跟原始图片一致：
image/png、image/jpeg、image/gif；image/jpg不标准，优先用image/jpeg -
base64,是固定字面量，逗号不能省，也不能写成BASE64,或base64: - 编码字符串本身不能换行、不能含空格或制表符
怎么生成合法的 Base64 字符串（命令行 & 浏览器双路）
手动复制粘贴容易带隐藏字符或截断，推荐用确定性方式生成。
- 终端（macOS/Linux）：
base64 -i icon.png | tr -d '\n'（tr去换行，否则 img 会加载失败） - Windows PowerShell：
[Convert]::ToBase64String((Get-Content icon.png -Encoding Byte)) - 浏览器控制台（临时调试）：
const b64 = btoa(String.fromCharCode(...new Uint8Array(await (await fetch('icon.png')).arrayBuffer())));—— 仅限同源小图，且注意 Unicode 陷阱，不建议生产用
关键点：输出必须是纯 ASCII 字符串，无换行、无前导/尾随空白。可用 console.log(b64.length) 粗略判断是否异常（比如意外多出 1–2 字符常因换行未清除）。
哪些场景适合内嵌，哪些一定不要用
内嵌不是“看起来高级就该用”，它本质是用体积换 HTTP 请求，只在特定条件下划算。
- ✅ 合适：图标类小图（≤ 2KB）、加载极快的占位图（
src切换前的骨架）、邮件模板（外部链接可能被拦截） - ❌ 千万别用：头图、轮播图、用户上传图、任何 > 4KB 的图——Base64 编码后体积膨胀约 33%，且无法单独缓存，HTML 变动一次整张图重传
- ⚠️ 注意：CSS 中用
background-image: url("data:image...")同样受上述限制，且无法被浏览器预加载器识别
Chrome DevTools 的 Network 面板里看 data: 开头的请求，size 显示为 `(from memory cache)`，但实际它跟 HTML 文本一起被重新下载——这点很多人误以为“已缓存”。
IE 和旧版 Safari 的兼容边界在哪
IE8 支持 data URL，但有 32KB 单文件上限；IE9+ 和 Safari 5.1+ 没硬性长度限制，但超长字符串会导致解析变慢甚至卡死渲染线程。
- 实测安全线：iOS Safari ≤ 8KB，Android WebView ≤ 12KB（尤其低端机）
- IE8 下若 Base64 超 32KB，
<img>直接不显示，也不报错 - 所有浏览器都不支持 data URL 作为
<link rel="icon">的href（favicon 必须是真实路径）
如果项目还需兼容 IE11 或 iOS 10，建议用 @supports (background: url(data:)) 做特性检测再降级，而不是盲目 fallback。
