Base64 から画像へ — ブラウザ内で Base64 Data URL を画像ファイルにデコード
Base64 画像の data URL を PNG、JPG、WebP、GIF ファイルにデコードします。ドラッグ＆ドロップまたは貼り付けるだけで、処理はすべてブラウザ内で完結。アップロードなし、制限なし。
Base64 でエンコードされた画像は、かつてよりも多くの場所で見かけるようになりました。もともとの用途は 1990 年代のメール添付でした。MIME には、7 ビットクリーンなテキストチャネルにバイナリを埋め込む方法が必要だったのです。しかし現在の用途はより多様で、登場頻度も高くなっています。CSS や HTML の中の data URL（小さなアイコンをスタイルシートにインライン化するもの）、画像をテキストとして送る API の JSON ペイロード、ビルドパイプラインにおけるコンテンツアドレス指定のハッシュ、そして任意のアプリケーションに貼り付けられるようテキストとしてクリップボードにコピーするスクリーンショットツールなどです。パターンはいつも同じで、data:image/...;base64, で始まりランダムな文字列に見えるものが続き、それを開いたり編集したりアップロードしたりできるファイルに戻したい、という状況です。
デコードについて見落とされがちなのは、data URL のプレフィックス自体がバイナリの中身を正確に示している点です。image/png はデコード後のバイト列が正当な PNG ファイル（ヘッダバイトは 89 50 4E 47）であることを意味し、image/jpeg は JPEG（FF D8 FF）、image/webp は WebP（RIFF...WEBP）、image/gif は GIF（GIF87a または GIF89a）を意味します。このデコーダーは MIME プレフィックスを読み取って出力ファイルの拡張子を設定し、デコードしたペイロードの先頭数バイトが宣言されたフォーマットと一致するかを検証します。MIME プレフィックスがない場合は、バイナリシグネチャから推測し、推定した拡張子を付けて出力します。
最後の受け渡しについて。デコードした画像が Web サイトのロゴやアイコンであれば、代わりに SVG として書き出すことを検討してください。ベクター形式のロゴはどんなサイズにも拡大縮小でき、同等の Base64 PNG よりも軽量です。Base64 の出どころが CSS ファイルであれば、それはすでに適切な場所にあるので、抽出せずインラインのまま残すという判断もあります。デコードした画像が数十枚のうちの 1 枚で、フォーマットを変換したい場合（PNG から WebP、JPG から PNG など）は、デコーダーと画像変換ツールをつなげてください。デコードしたファイルを保存してから、フォーマット変換ツールにアップロードします。
使い方
data URL または Base64 文字列を貼り付ける
完全な `data:image/png;base64,...` 形式の URL、または生のペイロードを入力欄に入れてください。ツールは MIME プレフィックスから画像フォーマットを自動判別し、プレフィックスがない場合はバイナリシグネチャから推定します。
デコードした画像をプレビューする
デコードされた画像はプレビューパネルに表示され、フォーマット、寸法、デコード後のバイトサイズが併記されます。大きな画像は UI の応答性を保つため、縮小したサイズでプレビューされます。
ファイルをダウンロードする
ダウンロードされるファイルは元の MIME タイプに対応した拡張子を保ちます。PNG の data URL なら `.png`、JPEG なら `.jpg`、WebP なら `.webp` です。ファイル名は既定で `decoded-<タイムスタンプ>.<拡張子>` になります。
よくある質問
data URL のプレフィックスはどのような形式ですか？
data URL は `data:image/png;base64,iVBORw0KGgo...` という形をしています。最初の部分が MIME タイプを示し、続いて `base64`、カンマ、そしてペイロードが並びます。ツールはプレフィックスを自動的に取り除きます。
非常に大きな Base64 画像も扱えますか？
扱えますが、デコードされた画像は保存されるまでメモリ上に置かれます。10 MB の Base64 文字列はおよそ 7.5 MB のピクセルデータになり、最近のハードウェアであればブラウザの制限内に収まります。100 MB を超えるペイロードではタブが固まる場合があります。
そもそも Base64 文字列はどうやって入手するのですか？
Image-to-Base64 ツールでローカルファイルをエンコードするか、CSS のルール、HTML の img src 属性、JSON Web Token のペイロード、開発者ツールのネットワークタブのレスポンスボディなどからコピーしてください。
出力は元画像とピクセル単位で同一になりますか？
はい。変換はバイト単位で正確です。Base64 は可逆的なエンコードであり、デコードされたバイト列はエンコード前のバイト列と完全に一致するため、得られるピクセルも元画像とまったく同じになります。
Base64 が壊れていたり途中で切れていたりする場合はどうなりますか？
ツールは入力の長さと Base64 の文字セットを検証します。文字の途中で切れている場合、デコーダーは最後の完全な 4 文字ブロックで停止し、切り詰めが起きたことを UI で通知します。
制限事項
- 大きな画像ではメモリ消費が大きい50 MB の Base64 画像をデコードすると、およそ 200 MB のブラウザメモリを消費します（デコード後のピクセルとキャンバスの分）。非常に大きなペイロードでは、プレビューを描画せずに直接ファイルへ保存するほうが安全です。
- 1 回のデコードにつき画像 1 枚1 つの Base64 文字列から 1 つのファイルが生成されます。バッチ処理が必要な場合は、ツールを繰り返し実行するか、Node.js の Buffer API を使った小さなスクリプトを書いてください。ブラウザ UI は単発のデコードに最適化されており、大量抽出には向きません。
- アニメーション GIF のフレーム選択には非対応アニメーション GIF はプレビューでは最初のフレームのみデコードされます。ダウンロードされるファイルは全フレームを保持した完全な GIF ですが、パフォーマンス上の理由から UI には最初のフレームだけが表示されます。
プラットフォーム別の注意点
- macOS
- デコードした PNG/JPG はダブルクリックで Preview に開けます。自動化したい場合、コマンドラインでの等価な処理は `echo '<base64>' | base64 -d > out.png` です。単発のデコードであれば、ブラウザツールを使えばターミナルを開かずに済みます。
- Windows
- コマンドラインでの等価な処理は、PowerShell の `[System.Convert]::FromBase64String()` とファイル書き込みの組み合わせです。CSS ファイルや HTML ページ、チャットウィンドウからコピーした内容には、ブラウザツールのほうが適しています。
- Linux
- ほとんどの Linux 用画像ビューア（Eye of GNOME、Gwenview、feh）でデコード後のファイルを開けます。CSS からコマンドラインで抽出する場合は、`grep -oP 'data:image/[^"]+' file.css | base64 -d > image.png` が同じ処理になります。
- iOS
- iOS Safari は非常に長い data URL も扱えますが、URL バーでは省略表示されます。メモアプリから Base64 を入力欄に貼り付けてください。ダウンロードした画像は共有シート経由で Photos に取り込めます。
- Android
- Android 版 Chrome は長い入力も切り詰めずに扱えます。ダウンロードしたファイルは Downloads フォルダに保存され、ギャラリーアプリの共有インテント経由で Photos に取り込めます。