在线免费图片转Base64
将任意图片转换为Base64字符串，用于CSS或HTML。
Who uses the 图片转Base64?
- 前端开发者将小图标嵌入 CSS，以消除额外的 HTTP 请求。
- 邮件开发者在阻止外部资源的 HTML 邮件中嵌入徽标图片。
- API 集成人员在需要字符串编码的 JSON 请求体中发送图片数据。
How the 图片转Base64 works
使用文件选择器上传您的图片文件，或将其拖放到工具区域。
Base64 字符串会立即在输出文本框中生成。
点击「复制 Base64」将完整的数据 URI（data:image/png;base64,...）复制到剪贴板，用于 HTML src 属性或 CSS 背景。
如果您只需要不带数据 URI 前缀的原始 Base64，请在使用前手动删除包括第一个逗号在内的所有内容。
Tips & tricks
- 复制按钮始终复制完整的数据 URI（带有「data:image/...;base64,」前缀）——没有单独的按钮仅复制原始 Base64 字符串。
- Base64 会使文件大小增加约 33%——此工具最适合小图标和大约 10KB 以下的图片，不适合大照片。
- 一次只能处理一张图片——不支持多文件批量转换。
- 输出文本框以纯文本形式显示完整的数据 URI——如果您不想使用复制按钮的完整输出，也可以手动选择并仅复制其中一部分。
Frequently Asked Questions
为什么要将图片嵌入为 Base64，而不是使用图片文件？
将图片以 Base64 形式嵌入 HTML 或 CSS 可以消除该图片的一次 HTTP 请求，这可以提高小图标和首屏关键图片的性能。这在 HTML 电子邮件中尤其有用，因为外部图片可能会被阻止。
Base64 图片比原始文件大多少？
Base64 编码会增加约 33% 的开销。一个 10KB 的 PNG 会变成约 13.3KB 的 Base64。对于大图片，这种开销会超过节省一次 HTTP 请求的好处——请仅将 Base64 用于小于 10KB 的图片。
复制按钮只复制原始 Base64，还是完整的数据 URI？
复制 Base64 按钮始终复制完整的数据 URI，包括「data:image/...;base64,」前缀——没有单独的按钮仅复制原始 Base64 字符串。如果您只需要原始字符串（例如用于 API 负载），请复制后手动删除包括第一个逗号在内的所有内容。
如何在 HTML img 标签中使用 Base64 图片？
将完整的数据 URI 用作 src：<img src="data:image/png;base64,iVBORw0KGgo..." alt="icon">。浏览器会解码并内联显示图片，无需外部请求。
如何在 CSS 中使用 Base64 图片？
将其用作背景：background-image: url("data:image/svg+xml;base64,...")。这对于 SVG 图标特别有效，因为它使样式保持独立。
哪些图片格式可以转换为 Base64？
您的浏览器能读取为文件的任何格式都可以：JPG、PNG、GIF、WebP 等。输出的数据 URI 前缀反映了源文件的实际 MIME 类型。
Is my data safe when using the 图片转Base64?
Completely safe. The 图片转Base64 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
What image formats does the 图片转Base64 support?
The 图片转Base64 works with common image formats supported by your browser, including JPEG, PNG, WebP, and GIF. SVG support varies by tool. No format conversion plugin or driver is needed.
Does the 图片转Base64 work with large image files?
Yes. The 图片转Base64 processes files entirely in your browser using the Canvas API. Very large files (over 20 MB) may take a few extra seconds on older or lower-powered devices. Closing other tabs can free up memory for better performance.