画像 Base64 変換ツール

Base64 画像（データURI）とは？

<!-- The same 1×1 transparent PNG, four ways -->

<!-- HTML -->
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==" alt="pixel">

/* CSS */
.badge {
  background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==");
}

<!-- Markdown -->
![pixel](data:image/png;base64,iVBORw0KGgo…)

// JSON
{ "mime": "image/png", "data": "iVBORw0KGgo…" }

主な機能

使用例

transparent-1x1.png（68 バイトの PNG）

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

icon.svg

<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0i…" alt="icon">

photo.jpg（12 KB）

![photo](data:image/jpeg;base64,/9j/4AAQSkZJRgABAQ…)

画像を Base64 に変換する方法

1. 1

   画像を追加

   ドロップゾーンに画像をドラッグ、クリックして参照、または Ctrl+V / Cmd+V でクリップボードから貼り付けます。PNG、JPG、GIF、WebP、SVG、ICO、BMP すべてに対応し、完全にブラウザ内でエンコードされます。

2. 2

   出力形式を選ぶ

   タブから データURI、生の Base64、HTML 、CSS background、Markdown、JSON を選びます。メタデータバーでサイズ増加を、アドバイスバッジでインライン化する価値があるかを確認します。

3. 3

   コピーまたはダウンロード

   コピーをクリックしてスニペットを取得、またはダウンロードでファイルとして保存します。逆の処理を行うには、Base64 → 画像 タブに切り替え、文字列を貼り付け、再構築された画像をダウンロードします。

よくある落とし穴

data:base64,iVBORw0KGgo…
<!-- no MIME type — will not render -->

data:image/png;base64,iVBORw0KGgo…
<!-- correct: image/png -->

data:image/png;base64,iVBORw0KGgoAAAANS
UhEUgAAAAEAAAABCAYAAAA…
<!-- embedded newline breaks the attribute -->

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAA…
<!-- single unbroken line -->

…WjR9awAAAABJRU5ErkJggg
<!-- missing trailing == -->

…WjR9awAAAABJRU5ErkJggg==
<!-- complete with padding -->

/* 380 KB hero photo inlined into a global stylesheet */
.hero { background-image: url("data:image/jpeg;base64,/9j/…(½ MB of text)…"); }

/* Serve it as a cached file instead */
.hero { background-image: url("/img/hero.jpg"); }

一般的なユースケース

ロゴやアイコンを CSS にインライン化

小さな PNG や SVG アイコンをドロップし、CSS background-image スニペットをコピーしてスタイルシートに貼り付け、めったに変わらないアセットの HTTP リクエストを一つ削減します。約 2 KB 未満（緑のバッジを確認）に保ち、スタイルシートを軽量に維持してください。

HTML メールに画像を埋め込む

メールクライアントはリモート画像をブロックすることがよくあります。ロゴをデータURI としてエンコードし、 要素をテンプレートに貼り付けると、サーバーへの取得なしで表示されます。クライアント間でテストし、埋め込みは写真ではなく小さなアイコンに限定してください。

自己完結型の Markdown と README

画像をホストできないとき——GitHub の Issue、ノートブック、オフラインのドキュメント——Markdown 出力は画像をファイルに直接埋め込むので、テキストと一緒に移動します。小さな図やバッジに最適です。

JSON や API ペイロード内の画像

サムネイルを JSON ドキュメントや設定ファイルに入れる必要がありますか？JSON 出力はそのまま入れられる { mime, data } オブジェクトを提供し、デコーダーは反対側で画像を復元します。

データURI の素早いデバッグ

スタイルシートや API レスポンスに謎の data: URI を見つけましたか？Base64 → 画像 タブに貼り付けると、それが実際に何かを確認し、本当の寸法を読み、通常のファイルとしてダウンロードして詳しく調べられます。

単一ファイルのウィジェットとブックマークレット

ブックマークレットと埋め込み可能なウィジェットは外部依存ゼロで自己完結している必要があります。アイコンを Base64 でインライン化すれば、どこにドロップしても動作する 1 つのファイルにすべてが収まります。

技術的な詳細

Base64 エンコードの仕組み

Base64 は画像のバイナリストリームを 3 バイト（24 ビット）ずつ取り、4 つの 6 ビットグループに分割し、それぞれを 64 シンボルのアルファベットの 1 文字にマッピングします。入力長が 3 の倍数でないとき、1 つまたは 2 つの = パディング文字が余りを示します。この 3 対 4 の比率が、エンコード後のテキストが元より約 33% 大きくなる理由です。ツールは文字列長とパディングからデコード後のバイト長を直接計算するため、報告されるサイズの数値は推定ではなく正確です。

MIME 検出とマジックバイト

ファイルをエンコードするとき、その MIME タイプはブラウザの File オブジェクトから取得されます。data: 接頭辞のない生の Base64 文字列をデコードするとき、ツールは先頭の文字を調べます。それらは画像のマジックバイトに対応します：PNG は iVBORw0KGgo、JPEG は /9j/、GIF は R0lGOD、WebP は UklGR、SVG は PHN2Zy または PD94bWw。これにより、入力がむき出しのペイロードだけでも、デコーダーは正しいデータURI を再構築し、正しいファイル拡張子でダウンロードできます。

ローカル限定の処理

エンコードは FileReader API の readAsDataURL を使い、完全にブラウザ内で合成されたデータURI を返します。ダウンロード用のデコードは atob と Uint8Array でバイナリを再構築し、続いて Blob とオブジェクト URL を使います——いずれもネットワークは介しません。結果として、オフラインで実行でき、機密画像を信頼して扱えるツールになります。バイトがページから出ないからです。リクエストゼロの挙動はブラウザの開発者ツールで確認できます。

ベストプラクティス

小さく安定したアセットだけをインライン化

Base64 のスイートスポットは、めったに変わらず少数のページにしか現れない約 2 KB 未満のアセットです——アイコン、小さなロゴ、UI スプライト。約 10 KB を超えると、サイズのペナルティと失われるキャッシュが節約したリクエストを上回ります。HTTP/2 が追加リクエストを安価にした今は特にそうです。アドバイスバッジに従い、写真や大きなグラフィックは通常のキャッシュされるファイルとして配信してください。

SVG には URL エンコードを優先

SVG はテキストなので、Base64 にすると利点なく膨らみます。CSS や HTML に SVG をインライン化するときは、代わりにマークアップを URL エンコードしてください——通常より小さく、人間が読める状態を保ち、gzip/brotli でよりよく圧縮されます。Base64 SVG は特にそれを必要とするパイプライン用に取っておきましょう。URL エンコーダー／デコーダーがパーセントエンコードを扱います。

常に正しい MIME タイプを設定

データURI はその MIME タイプがコンテンツと一致したときだけ表示されます：image/png、image/jpeg、image/gif、image/webp、image/svg+xml。誤ったまたは欠けたタイプは、埋め込み画像が表示されない最大の原因です。このツールからコピーするとタイプは自動で設定されます。URI を手作業で組み立てる場合は接頭辞を再確認してください。

エンコード前に圧縮する

Base64 はファイルサイズに約 33% を上乗せするため、まずソースを縮小すると二重に効きます。エンコード前に画像を 画像圧縮ツールに通すか、適切な寸法で書き出して、できるだけ小さなデータURI にしてください。4 KB に圧縮された PNG は、ファイルとしてもインラインとしても 40 KB の元画像に勝ります。

プライバシーのために Base64 に頼らない

Base64 は簡単に元に戻せ、何の保護も提供しません。機密性の高い画像コンテンツを隠すために使わないでください——このページのタブを含め、誰でも即座にデコードできます。コンテンツを保護する必要があるなら、サーバー側で本物のアクセス制御と暗号化を使い、認証されたエンドポイント経由で画像を配信してください。

よくある質問

この画像 Base64 変換ツールは何をしますか？

ドロップ・貼り付け・選択した画像を読み込み、そのバイト列を Base64 文字列としてエンコードします。すべてブラウザ内で完結します。生の Base64、すぐに使えるデータURI（data:image/png;base64,…）、そして HTML 、CSS background-image、Markdown、JSON 用のコピー＆ペースト用スニペットが得られます。メタデータバーには元のファイルサイズ、エンコード後のサイズ、正確な増加率（Base64 は約 33% 大きくなります）、ピクセル寸法、MIME タイプが表示されます。アップロードは一切行われません。エンコードは FileReader API を使ってローカルで実行されるため、スクリーンショット、社内アセット、未公開の画像にも安心して使えます。逆方向に変換するには、Base64 → 画像 タブまたは Base64 画像デコーダーをご利用ください。

画像はサーバーにアップロードされますか？

いいえ。すべての処理は FileReader API と JavaScript の文字列エンコードを使ってブラウザ内（クライアントサイド）で行われます。画像が送信・保存・記録されることは一切ありません。ブラウザの「ネットワーク」タブを開けば確認できます。画像のエンコード中にネットワークリクエストはゼロです。これにより、公開前の製品スクリーンショット、社内図、顧客アセット、NDA 対象のものなど機密素材にも安全です。アップロード制限によるファイルサイズの上限はなく、ブラウザと対象システムが快適に扱える Base64 文字列の大きさという実用上の限界があるだけです。

Base64 にすると画像はどれくらい大きくなりますか？

Base64 はバイナリデータ 3 バイトごとに 4 つの ASCII 文字としてエンコードするため、エンコード後の文字列は元のファイルより約 33% 大きくなります（さらにパディング数バイトと data: 接頭辞が加わります）。9 KB の PNG は約 12 KB のテキストになります。このオーバーヘッドは、大きな画像を Base64 にすべきでない最大の理由です。より多くのバイトを送ることになり、文字列が HTML や CSS に埋め込まれるため、その文字列を含むファイルが変更されるたびに再ダウンロードされ、独立してキャッシュできません。ツールはお使いの個別ファイルの正確な増加率をメタデータバーに表示するので、実際の数値で判断できます。

通常のファイルではなく Base64 画像を使うべきなのはどんなとき？

Base64（データURI として）は、キャッシュよりも別個の HTTP リクエストを避けることが重要な、小さくめったに変わらないアセットに適しています。CSS にインライン化する小さなアイコンやロゴ、HTML メールに埋め込む画像（多くのクライアントは外部画像をブロックしますがデータURI は表示します）、自己完結型でなければならない単一ファイルのウィジェットやブックマークレット、SVG スプライト、JSON/API ペイロード内に格納する画像などです。実用的な目安は、約 2 KB 未満で 1〜2 ページでしか使われない場合、インライン化が有利になることが多いということです。このツールのアドバイスバッジはまさにこの判断基準を反映しています。2 KB 未満は緑、10 KB までは黄色、それ以上は赤です。

Base64 画像を使うべきでないのはどんなとき？

大きいものやページ間で再利用するものには Base64 を避けてください。具体的な理由は 4 つあります：(1) 約 33% のサイズ増加により転送バイトが増える、(2) インライン画像は単独でキャッシュできず、それを含む HTML や CSS が変更されるたびに再ダウンロードされ、埋め込んでいるすべてのページで繰り返される、(3) 大きなデータURI のデコードは CPU とバッテリーを消費し、モバイルで顕著、(4) レスポンシブ画像（srcset/sizes）と遅延読み込みが使えなくなる。HTTP/2 は多数の小さなリクエストを安価に多重化するため、インライン化の本来の理由——リクエスト数の削減——はもはやほとんど当てはまりません。写真、ヒーロー画像、約 10 KB を超えるものには、通常のキャッシュされたファイルがほぼ常に速く読み込まれます。目的がより小さなファイルなら、まず 画像圧縮ツールに通してください。

HTML や CSS で Base64 出力をどう使えばいいですか？

HTML では、HTML タブに切り替えて生成された要素を貼り付けます：。CSS では CSS タブを使います。データURI を background-image: url("data:image/png;base64,…") でラップします。どちらも URL が受け付けられる場所ならどこでも動作します——img src、CSS の background、mask-image、favicon の link タグなど。data: スキームはすべてのモダンブラウザでサポートされています。一つ注意点として、インライン HTML 内の非常に長いデータURI は可読性を損ない、CSS ではすべての訪問者に配信されるスタイルシートを肥大化させるため、インライン化は本当に小さなアセットに限定してください。

どの画像形式に対応していますか？

PNG、JPEG/JPG、GIF（アニメーション含む）、WebP、SVG、ICO、BMP すべてに対応し、ブラウザがデコードできる場合は AVIF にも対応します。ツールは画像を再描画するのではなく生のバイトをエンコードするため、アニメーション GIF はアニメーションのまま、透過 PNG はアルファチャンネルを保持し、SVG は完全にスケーラブルなまま保たれます。MIME タイプはファイル自体から読み取られ、生の Base64 をデコーダーに貼り付けた場合はデータのマジックバイトから推測されます。エンコード中に形式変換は行われません。出力は提供したファイルそのものを表します。

なぜ SVG は特別なケースなのですか？

SVG はバイナリではなく XML テキストなので、Base64 にするとかえって大きくなり、読みづらくなるだけで利点がありません。CSS や HTML に SVG をインライン化する場合、マークアップを URL エンコード（#、<、>、引用符など一部の文字をパーセントエンコード）する方が Base64 より小さくなることが多く、ソースが読みやすく gzip にも適しています。一部のパイプラインが必要とするため本ツールも Base64 SVG 出力を提供しますが、CSS を手作業で最適化しているなら URL エンコードされたデータURI を選んでください。URL エンコーダー／デコーダーがその手法に役立ちます。

Base64 は暗号化と同じですか？

いいえ。Base64 は暗号化ではなくエンコーディングです。鍵が不要で、誰でも完全に元に戻せます。テキストしか扱えないシステム（HTML、JSON、メールヘッダー、URL）を通じてデータが転送中に壊れないよう、安全な印字可能 ASCII 文字でバイナリデータを表現するために存在します。誰でも数秒で Base64 文字列を元の画像にデコードできます。ここの Base64 → 画像 タブでも可能です。機密性の高い画像コンテンツを隠したり保護したりする手段として Base64 を扱ってはいけません。秘匿性はゼロです。

Base64 画像をメールに埋め込めますか？

はい、この技術の優れた用途の一つです。多くのメールクライアントはプライバシーのため外部ホスティングの画像をデフォルトでブロックし、リモートロゴに依存するレイアウトを壊します。小さな画像をデータURI として埋め込めば、サーバーへの取得なしで即座に表示されます。トレードオフは、一部の古いクライアント（特定バージョンの Outlook など）でデータURI のサポートが不安定なこと、そして大きな埋め込みはすべての受信者がダウンロードするメッセージサイズを膨らませることです。埋め込み画像は小さく保ち——写真ではなくロゴやアイコン——対象のクライアントでテストしてください。

Base64 画像が表示されないのはなぜですか？

最も多い原因は、data: 接頭辞の MIME タイプの欠落や誤り（PNG には image/png、JPG には image/jpeg、SVG には image/svg+xml を使う）、文字列に誤って挿入された空白や改行、末尾パディング（= または ==）を落とした切り詰めコピー、URL が期待される場所に data:…;base64, 接頭辞なしの生の Base64 だけを貼り付けたこと、などです。このツールのデコーダーは寛容で——空白を除去し、接頭辞ありなしどちらの入力も受け付け、画像のマジックバイトから MIME を推測します——ので、文字列を Base64 → 画像 タブに貼り付けるのが、データ自体が有効かどうかを確認する最速の方法です。