画像 to Base64変換器

画像をBase64エンコード文字列に変換

ここに画像をドロップまたはクリックして選択

最終更新:

ツールについて

画像 Base64 エンコーダは PNG / JPEG / GIF / SVG / WebP を data: URL に変換し、HTML・CSS・Markdown に直接埋め込めるようにします。小さなアイコンやメールテンプレート、単一ファイル HTML など追加の 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.