画像 ↔ Base64

画像の Base64 変換とは？#

データ URL とは、ファイル全体をインラインで埋め込み、先頭に MIME タイプを付けた文字列です（例: data:image/png;base64,iVBORw0KGgo…）。画像がこの文字列の中に収まると、テキストと同じように振る舞うようになります。HTML、CSS、JSON、Markdown ファイル、ソースコードに貼り付ければ、別のファイルを取得することなく、表示側でそのまま描画できます。本ページは、画像ファイルをデータ URL に変換し、逆にデータ URL を表示可能な画像に戻す処理を、すべてブラウザ内で完結させます。

Base64 はバイナリデータを約 33% 膨張させます（3 バイトが 4 つの ASCII 文字に変換されるため）。そのためデータ URL は、元のファイルより大きくなります。しかしこのトレードオフは、外部リクエストを完全にゼロにしたい場面では值得一撮ります。HTML メールの署名、単一ファイルのデモ、<head> にインライン展開する favicon、JSON 設定に同梱するアイコン、あるいは <img src> でディスクから読み込めない環境（CSP で制約されたページやサンドボックス化されたプレビューなど）向けのアセットが該当します。

本ツールは RFC 2397 に従ってデータ URL を解析し、base64 と URL エンコードされたテキストペイロードの両方を受け付け、MIME を検出した上で、プレビュー前に実際に画像として有効かどうかを検証します。そのため、壊れた文字列を貼り付けた場合でも、壊れた画像アイコンが黙って表示されるのではなく、明確にエラーとして報告されます。

使い方#

1. 画像を点線の領域にドロップするか、アップロードをクリックしてファイルを選択します。PNG、JPEG、WebP、GIF、SVG、BMP、AVIF、ICO に対応しています。
2. 左側の Base64 データ URL テキストエリアに、完全な data:image/…;base64,… 文字列が入ります。右側の コピー を使って取得してください。
3. 逆方向に変換するには、同じテキストエリアにデータ URL を貼り付けます。右側のプレビューが画像を再描画し、ダウンロード で正しい拡張子の実ファイルとして保存できます。
4. クリア で両方のペインを空にします。

MIME はデータ URL のヘッダーから読み取られ、ファイル拡張子から推測されることはありません。そのため、.png を .jpg にリネームしても本ツールは騙されず、ダウンロード時の拡張子は常に実際のタイプと一致します。

主な機能#

• 双方向変換。 画像 → データ URL（埋め込み用）、データ URL → ファイル（抽出用）を同じペインで行えます。
• MIME 対応。 提案されるダウンロード拡張子は、ファイル名ではなく実際のメディアタイプから導出されます（image/svg+xml → .svg、image/jpeg → .jpg）。
• プレビュー前に検証。 不正な文字列は、壊れた画像を黙って表示するのではなく、無効としてフラグ付けされます。
• 任意のバイト列を安全に処理。 Base64 エンコードはチャンク分割して行われるため、マルチバイトやバイナリのペイロードも破損なく往復変換できます。
• ローカル完結。 FileReader および atob/btoa API がページ内で処理を行い、データはアップロードされません。

実例#

pixel.gif、つまりメールクライアントが開封確認用ビーコンとして使うような 1×1 の透過トラッキングピクセル（43 バイト）があるとします。これをアップロードすると、データ URL テキストエリアに完全な文字列がそのまま生成されます。

data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7

これは実際の完全なデータ URL です。HTML の <img src="…">、CSS の background-image: url('…')、JSON のフィールドのいずれに貼り付けても、ファイルを取得することなく元のピクセルが描画されます。MIME（image/gif）と .gif というダウンロード拡張子は、どちらも元のファイル名ではなくデータ URL のヘッダーに由来します。

より大きな写真でも原理は同じです。異なるのは base64 部が大きくなること（バイトサイズの約 1.33 倍）と、MIME が image/jpeg や image/webp になることだけです。

よくある質問#

データ URL が元のファイルよりずっと大きいのはなぜですか？#

Base64 は 3 バイトを 4 文字で表すため、文字列のサイズはバイナリの約 1.33 倍になります。大きな画像では無駄が大きいので、先に圧縮ツールを使うか、ファイルをホストしてリンクする方がインライン展開より適しています。

サイズ上限はありますか？#

ブラウザは数百 MB のデータ URL を処理できますが、実際には数百 KiB を超えると HTML、CSS、JSON が肥大化し、パーサーの速度も落ちます。インライン展開するのは小さなアイコン、ロゴ、スプライトにとどめてください。

SVG も変換できますか？#

はい。SVG の MIME は image/svg+xml で、もともとテキストです。データ URL はコンパクトになり、ロスレスで往復変換できます。

貼り付けたデータ URL が「無効」と表示されます。なぜですか？#

文字列は data: で始まり、ヘッダーとペイロードを区切るカンマを含んでいる必要があります。途中で切れたコピー、先頭の余分な空白、;base64 フラグの漏れは、いずれも解析失敗の原因になります。ヘッダーを含めた完全な文字列をコピーし直してください。