画像→Base64
データURI
画像をアップロードしてBase64データURIに変換します。HTML、CSS、JavaScriptに追加HTTPリクエストなしで直接埋め込めます。
この変換はブラウザ内だけで実行され、サーバーへはアップロードされません。
画像をドラッグ＆ドロップ、または下から選択
PNG, JPEG, GIF, SVG, WebP · 最大 10 MB
UTF-8 テキストの Base64（画像以外）は Base64 エンコーダー & デコーダー
このツールについて
ブラウザの FileReader でローカル画像を読み、data URI（data:image/…;base64,…）または生 Base64（ペイロードのみ）を作ります。コピー前にプレビューで確認できます。
小さなアイコン、デモ HTML、テスト用フィクスチャに便利です。Base64 は約 1/3 大きくなり URL キャッシュを迂回するため、大きな写真は CDN／静的ホスト向けで、HTML・メール本文へのインラインは避けてください。
上限は 10 MB。インラインが必要なら数百 KB 以下に最適化してください。
よくある用途
- 追加リクエストなしで
imgのsrcや CSSbackground-image: url(…)を作る - HTML メール／署名に小さなロゴを埋め込む（メッセージ総量に注意）
- バイナリをコミットせずテスト用 Base64 フィクスチャを用意する
使い方
- ドロップゾーンへ画像を置くか参照（PNG, JPEG, GIF, SVG, WebP · 最大 10 MB）。
- プレビューと MIME・サイズ表示を確認。
- Data URI または 生 Base64 を選び コピー。
- Sample は 1×1 PNG、Clear でリセット。
例
| 用途 | 形 | メモ |
|---|---|---|
| HTML 画像 | <img src="data:image/png;base64,…" alt=""> | Data URI。アイコンは小さく。 |
| CSS 背景 | background-image: url("data:image/svg+xml;base64,…") | SVG は圧縮しやすい。 |
| API／設定 | data: なしの生 Base64 | Raw タブ。 |
| メール内の大写真 | Base64 よりホスト URL | クライアントの容量制限に注意。 |
実務での落とし穴
- メール容量: Base64+MIME は Gmail／Outlook の上限を超えやすい。写真はホストし、インラインは極小アイコンのみ。
- 大きな data URI は読み込み・描画コストが増えます。約 500 KB 超で UI が警告します。
- 画像専用です。UTF-8 テキストの Base64 はテキスト用ツールを使ってください。
参考資料
最終更新: 2026-07-27
よくある質問
- Data URI と生 Base64 の違いは？
- Data URI は `data:image/png;base64,…` で、`img` の `src` や CSS の `url()` にそのまま使えます。生 Base64 は カンマ以降だけで、`data:` なしの Base64 を求める API 向けです。
- 大きな画像をメールや HTML に埋め込んでよいですか？
- 通常は避けます。Base64 は約 1/3 大きくなり、多くのメールクライアントに容量制限があります。写真はホスト URL、 インラインは小さなアイコン向けです。
- 画像はサーバーにアップロードされますか？
- いいえ。ブラウザの FileReader だけで読み、端末から出ません。
- 日本語ファイル名の画像も扱えますか？
- はい。ファイル名の文字コードに関係なく、ブラウザが認識する画像 MIME を読み取ります。出力は MIME と Base64 です。