图片转 Base64 转换器

将图片转换为 Base64 编码字符串

将图片拖放到此处或点击选择

最后更新:

关于此工具

图片 Base64 编码器把 PNG/JPEG/GIF/SVG/WebP 转换为可直接嵌入 HTML/CSS/Markdown 的 data: URL。适合邮件模板小图标、单文件 HTML、缓存不重要的 CSS 雪碧图等需要消除额外 HTTP 请求的场景。

使用方法

  1. Drag an image onto the drop zone or click to choose a file from disk.
  2. Wait a moment while the file is read locally — nothing is uploaded to a server.
  3. Preview the image and inspect the generated data: URL or raw Base64 string.
  4. Copy the format you need (full data URL for HTML/CSS, raw Base64 for JSON payloads).
  5. Paste it into an <img src="…">, a CSS background-image: url(…), or a JSON field.

常见用例

  • Inlining small icons in HTML email templates that block external image loading.
  • Embedding a logo in a single-file HTML report (no asset bundle).
  • Storing user-uploaded avatars in JSON when a binary upload pipeline is overkill.
  • Reducing HTTP requests for tiny critical-path images on a landing page.
  • Pasting an image into a Markdown file that needs to be self-contained.
  • Including an SVG favicon directly in <link rel="icon" href="data:…">.

常见问题

Q. How big should an image be before I should NOT inline it?

A. Rule of thumb: under ~5KB for icons. Larger than that you lose caching benefits — the browser cannot cache the image separately and re-downloads it with every page.

Q. Does Base64 increase image size?

A. Yes, by about 33%. SVG is the exception — for SVG you can often avoid Base64 entirely with data:image/svg+xml;utf8,…

Q. Will old browsers render data: URLs?

A. Every modern browser does. Some legacy email clients (older Outlook) strip data URLs in <img>; for email use, test with the actual client.

Q. Is the image uploaded to your server?

A. No. Encoding happens entirely in your browser via FileReader. The image bytes never leave your device.