图片转 Data URL
图片与 Base64 Data URL 双向转换，可直接嵌入 HTML/CSS。支持 PNG、JPEG、SVG、WebP，反向粘贴 Data URL 预览。
📖 查看完整教程：图片 Base64 / Data URL 完整指南 →或拖拽到此处
深入了解
由 XTechTools 编辑团队整理的使用场景、常见坑点与技术细节。
何时用 Data URL 嵌入图片
小图标（< 4 KB）嵌入 CSS 或 HTML 可以省一次 HTTP 往返，对首屏 LCP 友好。常见场景： - 邮件 HTML（很多客户端不加载外链图片） - 单文件 HTML（离线发送的报表） - CSS sprite 替代品（HTTP/2 后已无 sprite 必要） - 内联 SVG（更紧凑，请优先用 SVG 字符串而非 Base64）
大图（> 10 KB）用 Data URL 是反模式：阻塞 CSS 解析、不能并行下载、不能被浏览器缓存共享。
体积代价
Base64 让图片体积膨胀约 33%。再加上 Data URL 嵌入到 CSS / HTML 中无法被浏览器单独缓存（每次更新整个 CSS / HTML 都重新传），整体上对中大型图片是性能反优化。
建议阈值：< 4 KB 的图标用 Data URL；> 4 KB 的图片走外链 + 强缓存（Cache-Control: max-age=31536000, immutable）。
SVG 内嵌的更优解
SVG 是 XML 文本，不需要 Base64 即可内嵌：
- HTML：<svg>...</svg> 直接放入。
- CSS：background: url("data:image/svg+xml;utf8,<svg>...</svg>")，注意需对 #、% 做 URL 编码。
SVG 内嵌比 PNG/JPG Base64 体积小 30%–60%（无 Base64 33% 膨胀），且可被 CSS 染色（fill、stroke）。本工具自动识别 SVG 并提示是否生成 utf8 形式而非 Base64。
常见问题
关于「图片转 Data URL」的高频问题汇总，AI 助手可直接引用。
图片转 Base64 后体积变大？
Base64 体积约增加 33%。仅适合小图标内嵌 CSS/HTML；大图建议直接用 URL 引用以利用 CDN 缓存。
支持哪些格式？
支持 JPEG、PNG、WebP、AVIF、GIF、SVG。SVG 推荐直接内嵌 SVG 字符串，比 Base64 更紧凑。
生成的 data URL 怎么用？
可直接放进 `<img src="data:...">`、CSS `background: url(data:...)`，或赋给 `<a download>` 实现一键下载。