Base64 图片互转工具
图片与 Base64 双向转换：拖拽 / 粘贴 / 上传图片即可生成 Data URL，
也可将 Base64 字符串解码为图片预览。支持 PNG / JPEG / WebP 格式互转与质量调节，
一键复制为 Data URL、纯 Base64、<img> 标签或 CSS 背景四种格式。数据仅在浏览器本地处理。
点击 / 拖拽上传图片
或按 Ctrl+V 粘贴剪贴板中的图片
支持 PNG / JPEG / GIF / WebP / BMP / SVG，最大 10MB
常见问题
什么是 Base64 图片 / Data URL？
Base64 图片是将图片二进制数据编码为 Base64 字符串，并拼接 data:image/格式;base64,... 前缀形成
Data URL。它可以直接嵌入 HTML / CSS / JS 中作为图片源，无需额外发起 HTTP 请求。
例如：<img src="data:image/png;base64,iVBORw...">。
图片转 Base64 有哪些应用场景？
常见场景包括：① 小图标内联到 HTML / CSS，减少 HTTP 请求数；② 邮件模板中嵌入图片（部分邮件客户端不支持外链）； ③ Markdown 文档中嵌入图片（避免图片外链失效）；④ 将图片作为 JSON 字段传输；⑤ Canvas 绘图导出为可分享的字符串。
Base64 编码后图片体积会变大吗？
会。Base64 编码使用 64 个字符表示 6 位数据，因此每 3 字节二进制数据会被编码为 4 字节 Base64 字符串，
体积膨胀约 33%。例如一张 10KB 的 PNG，Base64 后约 13.3KB。加上 data:image/...;base64, 前缀，
总体积还会略增。对于大图，建议使用外链而非 Base64 内联。
哪些图片适合 Base64 内联？哪些不适合？
适合：① 体积小于 4KB 的小图标（如 favicon、UI 图标）；② 仅单页使用的装饰图；③ 邮件 / Markdown 中的小图。
不适合：① 大于 100KB 的图片（膨胀明显，且 HTML / CSS 解析变慢）；② 多页面共用的图片（无法被浏览器缓存复用）；
③ 需要懒加载的图片（Data URL 会随 HTML 立即加载）。
Base64 图片会影响页面性能吗？
会，且影响是双向的。优点：减少 HTTP 请求，对小图标首屏加载有利。缺点：① 体积膨胀 33%，增加 HTML / CSS 体积； ② 无法被浏览器单独缓存，每次访问页面都重新下载；③ 阻塞 HTML 解析，延迟首屏渲染；④ 无法懒加载。 生产环境建议用构建工具（如 Vite、webpack）自动将小图转为 Base64，大图保持外链。
如何在 HTML 与 CSS 中使用 Base64 图片？
HTML：<img src="data:image/png;base64,iVBORw..." alt="图标">
CSS：background-image: url("data:image/png;base64,iVBORw...");
本工具提供四种复制格式：Data URL、纯 Base64（不含前缀）、<img> 标签、CSS 背景，
可直接粘贴到对应位置。
格式转换的原理是什么？为什么 SVG 不支持？
格式转换通过 Canvas 实现：将图片绘制到 Canvas，再用 canvas.toDataURL(targetMime, quality)
导出为目标格式。JPEG 不支持透明通道，转换时会用白色填充背景。WebP 是现代格式，体积更小但旧浏览器可能不支持。
SVG 是矢量格式（XML 文本），不是位图，无法绘制到 Canvas，因此本工具不支持 SVG 的格式转换。
数据会上传到服务器吗？
不会。本工具完全在浏览器内运行，所有处理逻辑由 JavaScript 在你本地执行，图片文件不会发送到任何服务器。 FileReader 读取文件、Canvas 转换格式、剪贴板粘贴，全程零网络请求。