PNG を Base64 に変換

PNG を Base64 に変換する方法

1. .png ファイルを枠にドロップするか、ファイル選択で選びます。スクリーンショットをエンコードするなら、コピーしてこのページで Ctrl+V（Mac では Cmd+V）を押してください。先に保存する必要はありません。
2. PNG が必要以上に大きいなら、最大幅 を設定するか、変換先 で WebP を選びます。メタデータ（EXIF）を削除 はテキストや EXIF のチャンクを取り除きます。
3. 出力形式 は Data URI のままにするか、CSS、<img>、Markdown、JSON、プレーン Base64 に切り替えます。
4. 出力をコピー します。プレビューにはピクセルサイズと、再エンコードした場合は新しいファイルサイズが表示されます。

Base64 の PNG の見た目

PNG はすべて同じ 16 バイトで始まります。8 バイトのシグネチャと、必ず最初に来る IHDR チャンクのヘッダーです。Base64 では、これが 22 文字の決まった書き出しになります。

iVBORw0KGgoAAAANSUhEUg

そのため iVBORw0KGgo で始まる文字列は、JSON のレスポンス、ログファイル、データベースのカラムのどこにあっても PNG です。その直後に、幅と高さが続く文字に詰め込まれています。

参考までに、1×1 の完全に透明な PNG を丸ごと示します。ファイルは 70 バイトで、Base64 は 96 文字です。

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNgYGBgAAAABQABeqhXUAAAAABJRU5ErkJggg==" alt="" width="1" height="1">

貼り付けには 1 つ落とし穴があります。ブラウザや画像ビューアーは、コピーした画像を元の形式にかかわらずたいてい PNG としてクリップボードに入れます。そのため JPEG の写真を貼り付けると PNG として届き、ディスク上のファイルよりずっと大きくなることがあります。元の形式が重要なら、元のファイルをドロップしてください。

エンコードした PNG がほかの文字で始まるなら、そのファイルは PNG ではありませんでした。中身が JPEG の .png ファイルは /9j/ で、.png にリネームした WebP は UklGR で始まります。プレビューの MIME タイプで、ブラウザが何と判定したかがわかります。

エンコード前に PNG、JPEG、WebP のどれにするか

PNG は可逆なので、ロゴ、アイコン、UI のグラフィック、文字の入ったスクリーンショットには適しています。写真には不向きで、写真の PNG は同じ画像の良質な JPEG や WebP より数倍大きいことがよくあります。Base64 は何を入れても約 33% 膨らませるので、最終的なサイズの大半はどの形式を選ぶかで決まります。

変換ツールはブラウザの canvas を通して再エンコードします。そのため、次の 3 つのことが起こります。

• JPEG に変換 すると透過が失われます。透明なピクセルは白になります。
• Safari には WebP のエンコーダーがありません。そこで WebP を指定すると、その旨の注意とともに PNG が返ってきます。
• canvas のエンコーダーは PNG を最適化しません。専用の最適化ツールですでに圧縮した PNG は、再エンコードすると大きくなることがあります。プレビューでサイズを比べ、元のほうが小さければそちらを使ってください。

メタデータ（EXIF）を削除 は、ついでに EXIF やテキストのチャンクなどの補助データも取り除きます。ほとんどの PNG はそうしたデータをあまり持っていませんが、スクリーンショットや一部のアプリからの書き出しには、ソフトウェア名やタイムスタンプが入っています。

Base64 の PNG が登場する場面

• CSS のアイコン：余分なリクエストを発生させたくない小さなアイコンに background-image: url("data:image/png;base64,...") を使います。ベクターのアイコンなら、通常は SVG のほうが小さくなります。SVG を Base64 に変換 をご覧ください。
• canvas の出力：canvas.toDataURL() はデフォルトで PNG の Data URI を返します。署名パッド、グラフ、画像エディターがこの形式を出力することが多いのはそのためです。Base64 を PNG に変換 でファイルに戻せます。
• API のペイロード：スクリーンショットサービス、テストランナー、AI の画像認識 API は、JSON の中で PNG を Base64 としてやり取りします。API が data:image/png;base64, の接頭辞を求めるのか Base64 だけを求めるのかを確認し、それに合わせて Data URI か プレーン Base64 を選んでください。
• テストのスナップショットやバグ報告：ビジュアルテストやクラッシュレポーターは、スクリーンショットを Base64 の PNG として JSON や HTML のレポートに入れ、レポートを 1 ファイルに保つことがよくあります。
• ファビコンと単一ファイルのページ：小さな PNG のファビコンを <link rel="icon"> に埋め込めば、HTML ファイルが外部ファイルなしで完結します。詳しくは ファビコンのページ をご覧ください。

コードで PNG をエンコードする

Node.js では、ファイルを Buffer に読み込んで 1 回の呼び出しでエンコードします。

import { readFileSync } from "node:fs";

const uri = "data:image/png;base64," + readFileSync("logo.png").toString("base64");

ブラウザでは、canvas から PNG の Data URI を直接得られます。

const uri = canvas.toDataURL("image/png");

ストリーミングや URLセーフな出力については Node.js の Base64 を、ブラウザでのファイルや Blob の扱いについては JavaScript の Base64 をご覧ください。

表示されない PNG の Data URI を直す

• 接頭辞が間違っている。 カンマまで含めて data:image/png;base64, でなければなりません。;base64 が抜けていると、ブラウザは文字をそのままのテキストとして読みます。
• URLセーフにチェックが入っている。 ブラウザは data: URL では標準のアルファベットしかデコードしません。- や _ を含む PNG の Base64 は壊れた画像として表示されます。
• CSS 内の改行。 76 文字で折り返し はメール用です。スタイルシートでは、url("...") の中に改行があると宣言が無効になります。
• 文字列が途中で切れている。 PNG は決まった 12 バイトの IEND チャンクで終わるので、Base64 はファイル長を 3 で割った余りに応じて AAAAAElFTkSuQmCC、AABJRU5ErkJggg==、AAAASUVORK5CYII= のいずれかで終わります。末尾が違っていて、画像が途中までしか描画されないか表示されないなら、コピーが途中で切れています。検証ツール で文字列の長さとパディングを確認してください。

よくある質問