Base64 画像変換ツール

Base64 画像デコードとは？

// A Base64 PNG payload (no prefix)
iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR42mNk+M9QDwADhgGAWjR9awAAAABJRU5ErkJggg==

// The decoder infers the format from the leading bytes:
//   iVBORw0KGgo → PNG
//   /9j/        → JPEG
//   R0lGOD      → GIF
//   UklGR       → WebP
//   PHN2Zy      → SVG (<svg)

// Reconstructed as a real file, downloadable as image.png
// (1 × 1 transparent PNG, 68 bytes — lossless round trip)

主な機能

使用例

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

1 × 1 PNG、透過 — プレビュー描画、.png としてダウンロード可能

/9j/4AAQSkZJRgABAQEAYABgAAD…

マジックバイトから JPEG を検出 — プレビュー＋.jpg でダウンロード

iVBORw0KGgoAAAANS
UhEUgAAAAEAAAAB
CAYAAAA…

空白を自動除去 — 有効な PNG をデコード

Base64 を画像に変換する方法

1. 1

   Base64 文字列を貼り付け

   完全なデータURIまたは生の Base64 ペイロードだけを入れます。デコーダーは空白と改行を自動で除去し、data: 接頭辞のあるなしどちらの入力も受け付けます。

2. 2

   プレビューとメタデータを確認

   透過が見えるようチェッカーボードの上に画像が即座に描画されます。ツールはデコードされた寸法、MIME タイプ、バイトサイズを表示します——接頭辞がない場合はマジックバイトから形式を推測します。

3. 3

   画像をダウンロード

   ダウンロードをクリックして、正しい拡張子で再構築されたファイルを保存します。デコードはロスレスなので、結果は元のエンコード画像とバイト単位で同一です。

よくある落とし穴

…WjR9awAAAABJRU5ErkJggg
// missing trailing == — fails to decode

…WjR9awAAAABJRU5ErkJggg==
// complete with padding — decodes cleanly

JVBERi0xLjcN…
// this is a Base64 PDF (%PDF header), not an image

iVBORw0KGgo…
// this is a Base64 PNG — renders correctly

url("data:image/png;base64,iVBORw0KGgo…")
// the url(" and ") are not part of the data

data:image/png;base64,iVBORw0KGgo…
// just the data URI

data:image/png;base64,iVBORw0KGgo%2B%2F…
// %2B / %2F are URL-encoded + and /

data:image/png;base64,iVBORw0KGgo+/…
// URL-decode first, then decode the image

一般的なユースケース

データURIからアセットを抽出

スタイルシートや HTML にデータURIとしてインライン化された画像を見つけ、実ファイルが必要ですか？文字列を貼り付け、プレビューを確認し、元の PNG、JPG、SVG をダウンロードします——ホストや再作成は不要です。

API レスポンスのサムネイルを調べる

API が Base64 画像フィールドを返し、それが何かを見たいとき。ペイロードを貼り付けると即座に描画され、本当の寸法とタイプを読み取り、詳しい調査やバグ報告のために保存できます。

壊れたインライン画像をデバッグ

埋め込み画像がページで表示されない。その Base64 をここにドロップしてください。正しくプレビューされれば、データは有効で、問題はマークアップか MIME タイプにあります。失敗すれば、文字列自体が切り詰められているか破損しています。

設定ファイルやテーマファイルから画像を復元

ビルドツールやテーマバンドルはアイコンやロゴを Base64 でインライン化することがよくあります。文字列をデコードして、編集・再書き出し・別の場所での再利用ができる通常のファイルとしてアセットを取り出します。

ビルドツールの出力を検証

バンドラーやスクリプトがデータURIを生成し、出荷前に有効で正しいか確認したい。ここでデコードするのが、エンコード手順が期待どおりの画像を生成したかを確認する最速の視覚的チェックです。

Base64 を共有可能なファイルに戻す

チャットやドキュメントで誰かが Base64 ブロブとして画像を送ってきた。貼り付けてプレビューし、開いたり添付したり通常通りアップロードできる実ファイルをダウンロードします。

技術的な詳細

デコードの仕組み

ブラウザ内蔵の atob が Base64 ペイロードをバイナリ文字列に変換し、ツールがそれを 1 バイトずつ Uint8Array にコピーします。その型付き配列は検出された MIME タイプでタグ付けされた Blob にラップされ、オブジェクト URL がプレビューとダウンロードリンクをそれに向けます。Base64 文字 4 つのグループごとに 3 バイトが得られ、末尾の = パディングが 1〜2 バイトの余りを示します。処理は正確かつロスレスです——再構築されたバイトは元のファイルと精確に一致します。

マジックバイトによる形式検出

入力に MIME タイプを宣言する data: 接頭辞がないとき、デコーダーは最初の数個の Base64 文字から形式を識別します。それらはファイルの署名バイトをエンコードしています。iVBORw0KGgo は PNG ヘッダーに、/9j/ は JPEG の SOI マーカーに、R0lGOD は GIF に、UklGR は RIFF/WebP コンテナに、PHN2Zy と PD94bWw は SVG の

ネットワークなし、ストレージなし

デコード、プレビュー、ダウンロードはすべてローカルです。fetch も XMLHttpRequest もサーバーへの往復もありません——ページが行う唯一のネットワーク活動は自身の読み込みだけです。貼り付けられた文字列はページの存続期間中メモリに保持され、閉じるか再読み込みすると破棄されます。これが、このツールが機密画像に安全でオフラインでも使える理由です。

ベストプラクティス

パディングを含め文字列全体をコピー

Base64 画像文字列はデコードのために完全でなければなりません。すべての文字、特に末尾の = または == パディングをコピーしたか確認してください——途中で終わる値は失敗します。デコードに失敗したら、文字列全体を選択し直して再コピーするのが最初に試すことです。

接頭辞なし文字列はマジックバイト検出を信頼する

生のペイロードしかない場合は、そのまま貼り付けてください——data: 接頭辞を手作業で作る必要はありません。デコーダーは先頭バイトから形式を推測し、正しい MIME タイプと拡張子を割り当てます。検出されたタイプを明示的に上書きする必要がある場合のみ、接頭辞を手動で追加してください。

ダウンロード前に寸法を確認

報告されたピクセル寸法と MIME タイプを、意図したアセットをデコードしたかの健全性チェックとして使ってください——特に複数を含むファイルから 1 つの文字列を取り出すときです。たとえば 1×1 の結果は、通常望んだ画像ではなくトラッキングピクセルを掴んだことを意味します。

Base64 は安全でないと心得る

デコードに鍵は不要なので、画像コンテンツを隠すために Base64 に決して頼らないでください。保護されていることを期待して文字列を受け取った場合、それは保護されていません——誰でもここで数秒でデコードできます。本物の保護にはエンコードではなく暗号化とアクセス制御が必要です。

再エンコードはロスレスに往復する

同じ画像をデコードして再エンコードするのはロスレスなので、両方のタブを安全に往復してパイプラインをテストできます。アセットを縮小する必要がある場合は、より小さなデータURIに再エンコードする前に、デコードしたファイルを 画像圧縮ツールで圧縮してください。

よくある質問