> base64 | decode | PNG <
// Base64 文字列や data URI を PNG 画像にデコード — アルファ保持、即時プレビュー、ワンクリックダウンロード
デコードされた PNG がここに表示されます
ビット単位で完全
デコードされた PNG は元のファイルとバイト単位で同一 — アルファ、パレット、カラープロファイルもすべて完全に往復します。
ローカルデコード
Base64 ペイロードはブラウザ内で atob() を使ってデコードされます。サーバーへのアップロードなし、PNG バイトのログなし。
ライブプレビュー
ダウンロードする前に、デコードされた画像、寸法、おおよそのファイルサイズを即座に確認できます。
// BASE64 TO PNG について
このツールが受け付ける形式
- >Data URI: data:image/png;base64,iVBORw0KGgo…
- >生の PNG Base64 ペイロード（iVBORw0KGgo で始まる）
- >空白や改行を含む Base64
- >標準 RFC 4648 アルファベット（+/、任意の = パディング）
- >URL セーフ Base64 (-_) — デコード時に自動正規化
- >Unicode 対応ペースト — BOM は除去
よくある用途
- >DOM インスペクターの data URI からスクリーンショットを保存
- >data-uri の CSS 背景からロゴを抽出
- >JSON API レスポンスから画像を復元
- >データベースの TEXT カラムから画像を復元
- >メール MIME パートから PNG を復元
- >インライン SVG に埋め込まれたアイコンを検査
- >壊れた <img src="data:image/png;base64,…"> タグのデバッグ
Base64 → PNG デコードの仕組み
デコーダーは data URI プレフィックスを除去し、空白と URL セーフ文字を正規化してから、atob() を呼び出して各 4 文字グループを 3 バイトのバイナリに戻します。バイト配列は MIME タイプ image/png の Blob にラップされ、object URL が付与されて <img> 要素でレンダリングされます。Base64 はバイナリと全単射のため、出力は元 PNG とビット単位で同一です — デコードされたファイルの SHA-256 は元と一致します。
PNG Data URI の例:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
パフォーマンスと互換性
- >デコードはペイロード長に対して O(n) — 100 MB+ も問題なく処理
- >ネイティブのブラウザ atob() を使用 — 重い JS シムなし
- >対応ビューアがあれば複数フレームの APNG もサポート
- >すべての現代ブラウザで動作 (Chrome, Firefox, Safari, Edge)
- >ピンチズーム対応のモバイルフレンドリーなプレビュー
- >ダウンロードは Blob URL 経由 — サーバー往復なし
// BASE64 TO PNG のデコード手順
ステップ 1: 貼り付け
Base64 文字列または完全な data URI を入力フィールドに貼り付け
ステップ 2: デコード
[DECODE] をクリック — PNG がプレビューに即座にレンダリングされます
ステップ 3: 確認
保存前に寸法、ファイルサイズ、アルファチャンネルを確認
ステップ 4: ダウンロード
[DOWNLOAD .png] をクリックすると、ビット単位で同一の PNG をディスクに保存します
// コード例 — BASE64 TO PNG
JavaScript (ブラウザ)
// Decode Base64 → PNG Blob → download link
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
const bin = atob(b64);
const arr = new Uint8Array(bin.length);
for (let i = 0; i < bin.length; i++) arr[i] = bin.charCodeAt(i);
const blob = new Blob([arr], { type: 'image/png' });
const url = URL.createObjectURL(blob);
window.open(url);生の Base64 ペイロードを Blob にデコードして開きます。完全な data URI の場合は <img> タグが直接受け付けます。
Node.js
const fs = require('fs');
const b64 = 'iVBORw0KGgoAAAANSUhEUg...';
fs.writeFileSync('out.png', Buffer.from(b64, 'base64'));Node 組み込みの Buffer を使って Base64 をデコードし PNG ファイルに書き出すワンライナー。
Python
import base64
with open('out.png', 'wb') as f:
f.write(base64.b64decode('iVBORw0KGgoAAAANSUhEUg...'))標準ライブラリのみ — Base64 テキストを PNG バイトにデコード。
PHP
<?php
file_put_contents('out.png', base64_decode('iVBORw0KGgoAAAANSUhEUg...'));組み込みの base64_decode() と file_put_contents() を使うワンライナー。
Shell (macOS / Linux)
echo 'iVBORw0KGgoAAAANSUhEUg...' | base64 -d > out.pngPOSIX の base64 -d / -D は標準入力からテキストを読み取り、デコードされた PNG を標準出力に書き出します。
// FAQ — BASE64 TO PNG
Q: Base64 から PNG へのデコードとは？
A: Base64 エンコードされた PNG を元のバイナリ形式に戻す処理です。貼り付ける文字列は 3 バイトあたり 4 文字の ASCII で、デコーダーは 4 文字ずつ読み取り、RFC 4648 アルファベット参照を適用して 1 グループにつき 3 バイトを書き出します。結果のバイト配列は完全で有効な PNG ファイルであり、プレビュー、保存、または通常の PNG が受け付けられるあらゆる場所に送信できます。
Q: Base64 文字列が本当に PNG かをどう確認する？
A: すべての PNG の最初の 8 バイトはマジックシグネチャ 89 50 4E 47 0D 0A 1A 0A です。Base64 エンコードすると、これら 8 バイトは常に iVBORw0KGgo で始まります。したがって iVBORw0KGgo で始まる Base64 文字列は PNG です。他のフォーマットは異なるプレフィックスを持ちます: /9j/ は JPEG、R0lGOD は GIF、UklGR は WebP。本デコーダーはこのマジックプレフィックスから PNG を自動検出し、data URI があればその MIME タイプにフォールバックします。
Q: data URI を貼り付けても良い、それとも生の Base64 のみ？
A: 両方対応します。文字列が data:image/png;base64, で始まる場合、デコーダーはプレフィックスを自動的に除去します。ペイロード部分のみを貼り付けた場合は、マジックバイトから PNG MIME タイプを推論します。空白、改行、復帰、タブはデコード前に正規化されるため、整形済みの JSON レスポンスを何も壊さずに貼り付けられます。
Q: デコードされた PNG が壊れている — なぜ？
A: よくある原因:
• 文字列の切れ — Base64 がどこかで切り詰められた（コピー元の改行制限など）。完全な PNG Base64 は RU5ErkJggg==（IEND チャンク）で終わります。これが欠けている場合、ファイルは不完全です。
• URL セーフアルファベット — 文字列が +/ ではなく -_ を使用している場合（base64url）、本ツールは正規化しますが、他のデコーダーは拒否する場合があります。
• 二重エンコード — PNG が Base64 で 2 回エンコードされた。もう一度デコードしてください。
• PNG ではない — ペイロードが実際には JPEG や WebP。任意のフォーマットを自動検出する 汎用 Base64 → 画像デコーダー をご利用ください。
Q: PNG にデコードし戻すと画質や透過は失われる？
A: いいえ。Base64 はビット単位で可逆な変換です。デコードされた PNG は元とバイト単位で同一で、アルファチャンネル、パレット (PLTE)、透過 (tRNS)、カラープロファイル (iCCP/sRGB)、ガンマ (gAMA)、物理ピクセル寸法 (pHYs) がすべて保持されます。デコードされたファイルの SHA-256 ハッシュは元のハッシュと一致します。もし差分が見える場合、その変化は Base64 往復ではなく、エンコード前に発生しています。
Q: ターミナルで Base64 を PNG にデコードできる？
A: はい。macOS と Linux: echo 'iVBORw0KGgo…' | base64 -d > out.png
（古い macOS では -D。）
Windows PowerShell: [IO.File]::WriteAllBytes('out.png', [Convert]::FromBase64String('iVBORw0KGgo…'))
文字列が完全な data URI の場合、まず data:image/png;base64, プレフィックスを除去してください（多くのシェルは sed 's|^data:.*base64,||' を受け付けます）。
Q: Base64 PNG 入力はどれくらい大きくできる？
A: ブラウザでデコードするため、上限はデバイスのメモリ — デスクトップで 100 MB+ は余裕で処理できます。100 MB のデコード済み PNG は約 135 MB の Base64 テキストを必要とし、ほとんどのブラウザは文句を言わずに貼り付けます。非常に大きな科学的・医療用 PNG を扱う場合は、ブラウザ atob() のパフォーマンスがメモリ上限付近で低下するため、サーバーサイドデコードを検討してください。
Q: このデコーダーはオフラインで動作する？
A: はい。デコードはすべての現代ブラウザに組み込まれているネイティブ atob() + Uint8Array + Blob API を使用します。ページを一度読み込めば、ネットワークから切断してデコードを続行できます。外部サービスなし、サーバー往復なし、画像ペイロードに対する解析なし。
Q: Base64 PNG と通常の PNG ファイルの違いは？
A: これらは完全に同じバイトを含みます。通常の .png ファイルは生のバイナリ、Base64 PNG 文字列は同じバイナリを 64 文字の ASCII アルファベットで書き換えたものです。Base64 形式は 33% 大きくなりますが、HTML 属性、JSON 文字列、CSS url()、メールに安全に埋め込めます。生の PNG バイトはヌルバイトや上位ビット文字を含み、テキストパーサーを壊すため、HTML には入れられません。Base64 はその回避策です。
Q: Base64 PNG は別の .png ファイルより速く読み込める？
A: 非常に小さな画像の場合のみです。Base64 は 1 回の HTTP 往復を省略でき、新しい接続では 50〜100 ms に達することがあり — 4 KB 未満のクリティカル UI アイコンには有用です。それ以上の画像では、(a) gzip が Base64 テキストを十分に圧縮できない、(b) data URI は個別にキャッシュできない、(c) HTML のパースをブロックする、といった理由で、長期キャッシュヘッダー付きで配信される別 .png ファイルがほぼ常に有利です。ヒーロー画像ではなく、ファーストビューのマイクロアセットに Base64 を使いましょう。
Q: データをどこにもアップロードせずに Base64 を PNG にデコードできる？
A: はい — このツールは 100% クライアントサイドで動作します。あなたの Base64 文字列はデバイス上の JavaScript でデコードされ、ローカルで Blob にラップされ、URL.createObjectURL() で表示されます。何もアップロードされません。デコード中にブラウザ開発者ツールのネットワークタブを開けば確認できます — リクエストは一切出ません。初回ページ読み込み後、オフライン（機内モード）で全フローを実行することもできます。
Q: 本番コードで Base64 を PNG にデコードするには？
A: Node.js: fs.writeFileSync('out.png', Buffer.from(b64, 'base64'))。Python: open('out.png','wb').write(base64.b64decode(b64))。Go: b, _ := base64.StdEncoding.DecodeString(b64); os.WriteFile("out.png", b, 0644)。Java: Files.write(Path.of("out.png"), Base64.getDecoder().decode(b64))。Rust: std::fs::write("out.png", base64::decode(b64)?)?。PHP: file_put_contents('out.png', base64_decode($b64))。すべてのランタイムの標準ライブラリには Base64 デコーダーが付属しており、サードパーティの依存関係はほとんど必要ありません。
Q: Base64 から PNG と Base64 から JPG — どのデコーダーを使うべき？
A: Base64 文字列が iVBORw0KGgo で始まる場合（または data URI が data:image/png;base64, と示している場合）は Base64 → PNG を使用します。文字列が /9j/4AAQ または /9j/2wC で始まる場合は Base64 → JPG を使用します。不明な場合は、マジックバイトを検査して正しいフォーマットを自動選択する 汎用 Base64 → 画像デコーダー をご利用ください。ペイロードに一致しないフォーマットを強制しないでください — デコードされたファイルは有効なバイト列ですが読めません。