画像→Base64エンコードツール（無料・登録不要・ブラウザ完結）
画像（JPG/PNG/WebP/GIF/SVG）をBase64エンコードしてdata URI・CSS background-image・HTML imgタグ・Markdown・JSON形式で出力。デコードもブラウザ完結で可能。サーバー送信なし・登録不要。Web制作・メール埋込み・CSS背景画像に最適。
最終更新：2026年5月15日
img src属性やCSSのbackground-imageに直接埋め込め、HTTPリクエストを削減できます。ただしデータ量が約33%増加するため、アイコンなど5KB以下の小さな画像への使用を推奨します。本ツールはブラウザ内（FileReader API）で処理するためファイルをサーバーに送信しません。data URI・CSS・HTML・Markdown・JSON の5形式で出力し、デコードして画像を復元することも可能です。
10KB超の画像をHTMLやCSSにBase64で埋め込むとページ速度が低下することがあります。外部ファイル参照の利用も検討してください。
data URI形式のBase64文字列を貼り付けてください。
data:image/png;base64,... の形式に対応しています。画像に変換してダウンロードできます。
使い方ガイド（用途別4パターン）
「HTML <img>」フォーマットを選択してコピー。HTMLファイルに直接貼り付けると外部ファイル参照なしで画像を表示できます。ページをZIPで配布する場合や、オフライン環境での利用に最適です。
<img src="data:image/png;base64,..." alt="">
「CSS」フォーマットを選択。小さなアイコン・区切り線・パターン画像をCSSに直接記述できます。別ファイルへのHTTPリクエストが不要になりCWV改善にも有効。5KB以内を目安に。
background-image: url("data:image/svg+xml;base64,...");
メールクライアントによっては外部画像がブロックされます。「HTML <img>」フォーマットを使うとメール本文に画像データを直接埋め込めます。ただし容量制限に注意（数KB推奨）。
GitHub README等でMarkdownファイルに画像を埋め込む場合に利用。外部ホスティングなしでドキュメントに画像を含められます。「Markdown」フォーマットを選択してコピー。
競合ツールとの機能比較
主要な画像Base64変換ツールとの機能比較（2026年5月調査）
| 機能 | tools-navi.jp （当ツール） |
lab.syncer.jp | base64.guru | codebeautify | devtools.io |
|---|---|---|---|---|---|
| 日本語対応 | ✅ | ✅ | ❌ | ❌ | ❌ |
| ドラッグ&ドロップ | ✅ | ✅ | ❌ | ❌ | ❌ |
| data URI出力 | ✅ | ✅ | ✅ | ✅ | ✅ |
| CSS形式出力 | ✅ | ❌ | ✅ | ❌ | ❌ |
| HTML imgタグ出力 | ✅ | ❌ | ✅ | ❌ | ❌ |
| Markdown出力 | ✅ | ❌ | ❌ | ❌ | ❌ |
| JSON出力 | ✅ | ❌ | ❌ | ❌ | ❌ |
| デコード→画像復元 | ✅ | ❌ | ❌ | ❌ | ✅ |
| サイズ増加率表示 | ✅ | ❌ | ❌ | ❌ | ❌ |
| 推奨サイズ警告 | ✅ | ❌ | ❌ | ❌ | ❌ |
| サーバー送信なし | ✅ | ✅ | ❌ | ❌ | ✅ |
| FAQ・解説 | 7問 | なし | あり | なし | なし |
画像Base64の仕組みと注意点
data URI スキームとは
data:[メディアタイプ];base64,[エンコードデータ] の形式で、ファイルの内容をURLとして表現する仕組みです（RFC 2397）。
HTMLやCSSから外部ファイルなしで画像・フォント等を参照できます。
JPGやPNGのバイナリデータを、64種類のASCII文字（A-Z/a-z/0-9/+/）で表現します。3バイト→4文字なので約33%増加。
data:image/jpeg;base64,... の形式で先頭に画像の種類（MIME）を付与します。ブラウザはこのMIMEを見て画像を表示します。
HTMLなら src 属性、CSSなら url() 関数内に貼り付けます。外部ファイルへのHTTPリクエストが発生しません。
大きな画像（10KB超）をBase64で埋め込むと、HTMLやCSSファイルのサイズが大幅に増加してページの初期ロード（LCP）が悪化します。
- アイコン・小さいロゴ・パターン：Base64埋め込みに適している（〜5KB）
- 写真・スクリーンショット（10KB〜）：外部ファイル参照を推奨
- ファビコン（ICO/SVG）：Base64埋め込みが一般的
シーン別活用事例
ajaxローダーなどの小さなGIFをCSSに直接埋め込むことで、外部リクエストなしでアニメーションを表示。ネットワーク遅延の影響を受けません。
プロトタイプやランディングページを1ファイルで配布するとき、画像をBase64で埋め込めば依存ファイルなしで動作します。
会社ロゴをメール署名に埋め込む場合、外部URLを使うと「画像がブロックされています」と表示されることがあります。Base64埋め込みで確実に表示。
Service Workerでキャッシュする際、小さなUIアイコンをBase64でJSファイルに埋め込むことでオフライン時も確実に表示できます。
JSON APIで画像データを送受信する場合にBase64形式が使われます。APIレスポンスのBase64画像フィールドを復元する際は「デコード」タブを利用。
よくある質問（FAQ）
- 画像をBase64に変換するとファイルサイズはどうなりますか？
- 元画像の約1.33倍（33%増）になります。3バイトのデータを4文字のASCIIで表現するためです。例えば10KBの画像はエンコード後に約13KBになります。このためHTMLやCSSに埋め込むと総ファイルサイズが増加し、初期ロードが遅くなる可能性があります。小さなアイコン（〜5KB）での利用を推奨します。
- 対応している画像フォーマットはどれですか？
- JPG（JPEG）・PNG・WebP・GIF・SVGに対応しています。ブラウザのFileReaderAPIを使用するため、ブラウザが対応しているほぼ全ての画像形式が利用可能です。BMP・ICO・AVIFも多くのブラウザで対応しています。
- 画像データはサーバーに送信されますか？
- 一切送信されません。このツールはJavaScriptのFileReader APIを使用し、ブラウザ内のみで処理を完結しています。選択した画像ファイルはサーバーにアップロードされず、完全にプライバシーが保護されます。機密性の高い画像も安全に変換できます。
- 「10KB超は注意」と表示されましたが、使ってはいけませんか？
- 使えますがパフォーマンスへの影響に注意が必要です。大きな画像をBase64でHTMLに埋め込むとHTMLファイル自体が大きくなり、Googleが重視するLCP（最大コンテンツの描画）スコアが悪化する可能性があります。写真などの大きな画像は外部ファイルとして参照し、lazyloadで読み込む方法を推奨します。
- CSSとHTMLでどちらを使うべきですか？
- 用途によって使い分けます。CSS形式は背景画像・パターン・アイコンに適しています（
background-image: url(...)）。HTML形式はコンテンツとしての画像に使います（<img src="...">）。Markdownはドキュメント・READMEファイル、JSONはAPIレスポンスや設定ファイルへの埋め込みに使います。 - デコードはどんなBase64文字列に対応していますか？
- data URI形式（
data:image/png;base64,...）のみに対応しています。先頭のdata:image/を含む形式を貼り付けると自動的にデコードして画像を復元・ダウンロードできます。Base64部分のみ（プレフィックスなし）の入力には非対応です。 - SVGをBase64にすることはできますか？また直接埋め込みとどう違いますか？
- はい、SVGのBase64変換（
data:image/svg+xml;base64,...）に対応しています。ただしSVGはBase64なしでもURLエンコードして直接埋め込める（data:image/svg+xml,%3Csvg...）ため、SVGの場合は直接埋め込みの方がファイルサイズが小さくなることがあります。アイコン程度のSVGなら直接埋め込みを検討してください。 - Base64エンコードはキャッシュに不利と聞きましたが本当ですか？
- はい。Base64でHTMLやCSSに埋め込んだ画像は、ブラウザが個別のファイルとして識別してキャッシュできません。HTMLやCSSが更新されるたびに画像も再読み込みされます。アイコンなど変更頻度が低く小さい画像（1〜5KB以下）は埋め込みのメリット（HTTPリクエスト削減）がキャッシュのデメリットを上回りますが、変更頻度が高い画像は外部ファイルとして管理することを推奨します。