🖼️ 图片 → Base64 / Data URL 转换
拖放图片即可转换为 Base64 / Data URL。可直接用于 CSS background-image 或 HTML img 标签。
拖放图片或点击选择
PNG / JPG / WebP / SVG / GIF / AVIF / BMP / ICO
预览
- 文件名
- MIME
- 大小
- Base64 size
- 尺寸
💡 Data URL 使用方法
• 嵌入小图标或 1–2 KB 图片可减少 HTTP 请求数。
• Base64 编码会增加约 33% 的大小。
• SVG 可以考虑直接内联为 XML — 通常比 Base64 更小。
📖 常见的坑
把图像转换为 Base64，并导出为 data URL、CSS 的 background-image、HTML 的 img 标签或 Markdown。处理全部在浏览器内完成，文件不会被上传。用 data URL 能少一个 HTTP 请求，但这未必就更快——数据量会增加约 33%，浏览器缓存也不再起作用。权衡这两点，正是使用本工具时唯一真正的判断。
| 情形 | 会发生什么 | 怎么处理 |
|---|---|---|
| 嵌进去之后反而更慢了 | 被转成 data URL 的图片无法单独被缓存——因为它已成为承载它的 CSS 或 HTML 的一部分。在 CSS 中影响最大：样式表会阻塞渲染，因此图片的字节数直接转化为首屏绘制前的延迟。二十张 10KB 的图片会变成一个 266KB 的阻塞渲染资源，取代了原本可以并行加载的二十个请求。而且，只要换掉其中一张图，整份样式表的缓存就失效，每次更新所有用户都要重新下载全部内容。 | data URL 只在几 KB 以内的小图标上才划算——大致标准是一两 KB，且极少变动：对勾、箭头、加载转圈这类界面的零碎构件。再大的就该用普通的 <img> 加载——缓存与响应式图片（srcset）带来的好处，稳稳超过省下的那一个请求。而且前提本身已经变了：自 HTTP/2 起，额外请求的代价大幅下降——「减少请求就更快」是 HTTP/1.1 时代的经验法则，如今并不自动成立。判断标准是：比较「这张图多久换一次」与「这份 CSS 要分发多少次」。 |
| 连 SVG 也做成了 Base64 | SVG 是文本，把它做成 Base64 是亏本买卖。Base64 把三个字节变成四个字符，因此必定增加约 33%；而且结果近似随机数据，gzip 与 Brotli 几乎压不动。原始 SVG 中重复的标记很多，保持原样时压缩可减小约 70%，但 Base64 把这一特性彻底摧毁。「先优化再转 Base64」这套流程，常常把优化省下的那部分原样抵消掉。 | 要内嵌 SVG，请用百分号编码而不是 Base64——写成 data:image/svg+xml,%3Csvg...。必须转义的只有 #、%、" 三个，其余几乎可以原样放着，因此结果比 Base64 更小，而且仍可压缩。更好的选择是：SVG 根本不必做成 data URL，直接内联书写——把 <svg> 放进 HTML，就能用 CSS 换色、做动画，而且比 data URL 更短。若要使用多个图标，请合并成 SVG 雪碧图，而不是逐个内嵌——在请求数与总体积上都更划算。 |
| data URL 被 CSP 或投放平台拦下 | 若内容安全策略写成 img-src 'self' 这样，使用 data: 方案的图片会被拒绝，什么也显示不出来——控制台会有报错，但视觉上只是「少了一张图」，原因很容易被忽略。投放端也一样：Gmail 不会显示 HTML 邮件中的 data URL 图片，表现为本地预览一切正常，收件箱里却空缺。「既然嵌进去了就一定能显示」，正是最容易落空的那个期待。 |
若你启用了 CSP，请显式放行 data:——写成 img-src 'self' data:，但不要把它并进 default-src。连脚本与样式也放行 data:，会扩大 XSS 的攻击面；只针对图片放行才是正确的粒度。至于 HTML 邮件，请不要使用 data URL，改用绝对 URL 引用外部图片；并且要知道，反正多数客户端默认就屏蔽外部图片，因此更要紧的是让正文在没有图片时也读得通。而且无论走哪条路，除了真正投递出去、在真实环境里打开确认之外，没有别的验证办法——本地预览对这类问题一无所知。 |
Base64 连混淆都算不上。嵌在样式表里的 data:image/png;base64,...，用浏览器开发者工具当场就能解码并查看——把机密截图或尚未公开的图稿嵌进去，理由是「藏在 CSS 里所以看不见」，那纯粹是错的。此外还有一条本工具特有的提醒：这里是把文件的字节序列原样做 Base64，因此 EXIF 会完整保留。与经过 Canvas 的图像工具不同，GPS 坐标、拍摄时间、相机型号，全都原封不动地留在你生成的 data URL 里。要把手机拍的照片以 data URL 形式公开时，请先清除 EXIF——图像格式转换与图像缩放都会经过 Canvas，在此过程中 EXIF 会被清除。「嵌进去了所以内容看不见」这一直觉，在上述两点上都不成立。
📖 使用方法
-
1
拖放或点击选择图片将图片拖放到拖放区域,或点击选择文件。支持 PNG、JPG、WebP、SVG 等主要格式。
-
2
选择输出格式选择 Data URL、纯 Base64、CSS background-image、HTML img 标签或 Markdown 格式。
-
3
复制并使用点击复制按钮将编码文本保存到剪贴板,然后粘贴到代码中。
❓ 常见问题
支持从剪贴板粘贴吗？
Base64 转换后文件大小会怎样？
什么情况下适合使用 Data URL？
🐛 此工具出现问题了吗？
免费、无需注册。仅提供复现步骤也有帮助。报告将直接发送给运营者并用于改进。
感谢您的反馈！
已送达运营者,将用于改进工具。