Data URL 生成与解析
把 data:image/png;base64,... 贴进来：前缀自动摘掉、MIME 记下来、文件还给你。反过来，拖个文件进来就能生成可以直接嵌进 CSS 或 HTML 的 Data URL。
- 结构：
data:[<mediatype>][;base64],<data> - 适合：几 KB 的小图标、单文件 HTML、邮件模板
- 别用：大图、要复用、要缓存的资源 —— 它撑大体积还不能单独缓存
粘贴即自动处理，不用点按钮（Ctrl+Enter 立刻转换 / Esc 清空）
拖文件进来，或 ——截图直接 Ctrl+V 也行
任意类型 · 100 MB 封顶
粘贴、拖拽、Ctrl+V 截图都行
Data URL 长什么样
结构是 data:[<mediatype>][;base64],<data>。拿 data:image/png;base64,iVBORw0KGgo... 举例：data: 是声明，中间那段是 MIME 类型和 base64 标记，逗号之后才是数据本体。所以解码的第一步，永远是先把逗号前面那截摘掉。
格式细节可以看 MDN 的 Data URL 说明。
什么时候该用，什么时候别用
- 适合：几 KB 的小图标、单文件 HTML、邮件模板、想减少请求数的关键小图
- 别用：大图、要复用的资源、需要浏览器缓存的场景 —— Data URL 撑大 HTML 和 CSS、不能单独缓存，还比原文件大 33%
三个常见坑
- MIME 写错：
image/jpg不是标准写法，浏览器可能直接不渲染，应该写image/jpeg - CSS 里忘了引号：数据里含逗号和加号时最容易出问题，建议用引号把整个 url 包住
- 把大段 Base64 直接塞进 CSS 又不压缩，文件体积肉眼可见地涨
常见问题
Data URL 和 Base64 是一回事吗？
不是。Base64 是编码方式，Data URL 是「MIME 类型 + Base64 数据」的一种写法。两种输入工具都认。
没标 ;base64 的那种 data: 呢？
工具会先提示一句，再按 Base64 试着解。百分号编码的数据本来就不是 Base64，试解会报非法字符 —— 那种要用专门的 URL 解码工具。
能预览哪些图片格式？
浏览器能显示的（PNG、JPG、GIF、WebP、SVG 等）都会直接给预览，不能显示的（比如 HEIC）给下载按钮。