> PNG | encode | data-uri <
// PNG 画像を Base64 文字列および data URI にエンコード — アルファ透過を保持し、ブラウザ内で完結
PNG をここにドロップ、またはクリックして選択
クリックして PNG ファイルを選択
アルファ保持
PNG のアルファチャンネル、パレット、gAMA/tRNS チャンクをバイト単位でエンコード — 再圧縮なし、品質劣化なし。
100% クライアントサイド
PNG がブラウザから外に出ることはありません。FileReader + btoa() でローカル処理 — サーバー往復なし。
コピー & ペースト
HTML、CSS、メール、JSON ペイロード、インライン SVG にすぐ使える規格準拠の data:image/png;base64,… URI を取得。
// FAQ — PNG TO BASE64
Q: PNG の Base64 エンコードとは？
A: .png ファイルのバイナリ内容を、RFC 4648 で定義された Base64 アルファベットを使って ASCII 文字列に変換する処理です。エンコード後のテキストは HTML の <img> タグ、CSS の background-image、メール本文、JSON API ペイロード、その他テキストのみを扱うあらゆる経路に直接埋め込めます。PNG 本体のバイト列は変わらず — IHDR・IDAT・tRNS・IEND の各チャンクはエンコードされ、完全に復元可能です。
Q: ブラウザで PNG を Base64 にエンコードするには？
A: PNG をドロップゾーンにドラッグ（またはクリックして選択）します。ツールは FileReader.readAsDataURL() でファイルを読み込み、そのまま使える data:image/png;base64,… URI を返します。<img src="…"> に直接貼り付けたい場合は Data URI、API やデータベースが data:image/png;base64, プレフィックスなしの純粋な Base64 部分を期待する場合は Base64 ペイロードのみ を選択してください。
Q: PNG を Base64 にエンコードすると透過や画質は失われる？
A: いいえ。Base64 は純粋なバイナリ ↔ テキスト変換で、元 PNG の全バイト（アルファチャンネル、パレット、カラープロファイル iCCP/sRGB チャンクを含む）が保持されます。文字列をデコードし直すと、ファイルはビット単位で完全に一致します。デコード後の PNG の SHA-256 ハッシュは元ファイルと同一です。そのため、ピクセル精度が重要なアイコン、ロゴ、スクリーンショットを埋め込むには Base64 が最適です。
Q: PNG を Base64 エンコードするとサイズはどれだけ増える？
A: Base64 は入力 3 バイトごとに 4 文字を使うため、エンコード後の文字列は元の PNG ファイルより 約 33% 大きく なります。正確なサイズは 4 × ⌈n / 3⌉ 文字（n は PNG のバイト数）。10 KB の PNG はおよそ 13.6 KB の Base64 テキストになります。HTTP 圧縮（gzip・Brotli）が Base64 テキストを比較的うまく圧縮するため、通信経路上のオーバーヘッドは実際には 10〜15% 程度に収まります。
Q: Base64 エンコードされた PNG はどのような見た目？
A: すべての PNG Base64 文字列は iVBORw0KGgo で始まります。このプレフィックスは、8 バイトの PNG シグネチャ 89 50 4E 47 0D 0A 1A 0A を Base64 に再エンコードしたものです。つまり iVBORw0KGgoAAAANSUhEUg... は必ず PNG であり、このプレフィックスがあるかどうかは、データが壊れていないかの素早い目視チェックになります。data URI として包むと次のようになります: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mP8/5+hHgAHggJ/PchI7wAAAABJRU5ErkJggg==
Q: HTML で PNG を Base64 として埋め込むには？
A: 完全な data URI を <img> タグの src 属性に貼り付けます: <img src="data:image/png;base64,iVBORw0KGgo…" alt="logo">
ブラウザは Base64 ペイロードをデコードし、URL から読み込まれたのとまったく同じ形で PNG をレンダリングします。追加の HTTP リクエストは発生しないため、クリティカルパスのアイコン、メール署名、オフラインファーストアプリに便利です。
Q: Base64 PNG を CSS の背景として使うには？
A: data URI を url() 関数で包みます: .icon { background-image: url('data:image/png;base64,iVBORw0KGgo…'); }
再利用する場合は CSS カスタムプロパティに格納します: :root { --logo: url('data:image/png;base64,iVBORw0KGgo…'); } .brand { background: var(--logo); }
インライン背景はアイコンごとの HTTP リクエストを 1 つ減らしますが CSS ファイルを肥大化させるため、小さなアイコン（4 KB 未満）にのみ使用してください。
Q: JavaScript / Node / Python / PHP で PNG を Base64 にエンコードするには？
A:
JavaScript（ブラウザ）: const uri = await new Promise(r => { const f = new FileReader(); f.onload = () => r(f.result); f.readAsDataURL(pngFile); });
Node.js: fs.readFileSync('logo.png').toString('base64')
Python: import base64; base64.b64encode(open('logo.png','rb').read()).decode()
PHP: base64_encode(file_get_contents('logo.png'))
Go: base64.StdEncoding.EncodeToString(pngBytes)
Ruby: Base64.strict_encode64(File.read('logo.png'))
Q: 通常の画像ファイルではなく Base64 PNG を使うべき場面は？
A: 次のような場合に Base64 PNG data URI を使います:
• 画像が 4 KB 未満（HTTP 往復を省略するため）
• HTML メールに埋め込む必要がある（多くのクライアントはリモート画像をブロック）
• 単一ファイル HTML のレポートやダッシュボードを配布する
• 画像を JSON ペイロードやデータベースのカラムに格納する
画像が大きい、多数のページで再利用される、あるいは独立した CDN キャッシュが必要な場合は、外部 .png ファイルを選びましょう。
Q: Base64 エンコードは PNG の透過やパレット PNG にも対応する？
A: はい。Base64 はビット単位の変換なので、すべての PNG カラーモードに同等に対応します:
• RGBA / トゥルーカラー + アルファ — 32 ビットカラー、完全な透過
• パレット (PLTE) + tRNS — 1 ビット透過付きインデックスパレット PNG
• グレースケール + アルファ — 8/16 ビットのグレースケール + アルファ
• 16 ビットディープカラー PNG — 医療画像や科学可視化で使われる HDR 系 PNG
いずれも Base64 を通してクリーンに往復し、PNG を理解するブラウザで正しく表示されます。
Q: Base64 エンコードされた PNG は暗号化されていてプライベート？
A: いいえ。Base64 はエンコードであって暗号化ではありません。文字列を読める人なら誰でもミリ秒で元の PNG にデコードできます。スクリーンショットにパスワード、API トークン、個人情報が含まれている場合、Base64 エンコードでは保護されません — Base64 出力の上に本物の暗号化レイヤー（AES-GCM、age、PGP）を適用するか、アクセス制御を行うサーバーへ TLS 経由で転送してください。
Q: ここでエンコードできる PNG の最大サイズは？
A: 人為的な上限はありません。エンコードはローカルで動作するため、上限はブラウザのメモリ — デスクトップでは概ね 100 MB+、モバイルでは 40〜60 MB 程度です。超大型 PNG（高解像度の医療画像や衛星画像）の場合、ファイルをチャンク単位で読み込み、各チャンクに btoa() を呼び出してメインスレッドの応答性を保ちます。およそ 100 MB を超える画像は、ブラウザに読み込まずサーバーサイドエンコーダーから直接ストリーミングすることを検討してください。
Q: PNG を Base64 と JPG を Base64 — どちらを使うべき？
A: ロゴ、UI アイコン、スクリーンショット、図表、透過やシャープなエッジ（テキスト、グラフ）を含むものには PNG → Base64 を使用してください。PNG はロスレスでアルファ対応です。写真や多色グラデーションを含む画像で非可逆圧縮が許容される場合は JPG → Base64 を使用します。JPEG は通常、同じ写真に対して PNG より 5〜20 倍小さいため、Base64 ペイロードも大幅に短くなります。経験則: 画像がカメラ由来または写真的グラデーションを含むなら JPG、それ以外なら PNG を選びましょう。