使い方
- PNG をドロップエリアにドロップするか、クリックして選択するか、クリップボードからスクリーンショットを貼り付けます。
- 元の PNG のバイト列をそのままエンコードするには、「変換形式」を「元の形式のまま」にします。大きな画像を縮小したい場合は「最大幅」を設定します。
- 画像に表示される元のサイズとエンコード後のサイズを比べます。
- data URI、Base64 文字列のみ、img タグ、CSS、Markdown の出力をコピーまたはダウンロードします。
PNG と Base64
PNG（Portable Network Graphics、MIME タイプ image/png）は、完全なアルファチャンネルを備えたロスレスのラスター形式で、アイコン、ロゴ、図、スクリーンショットによく使われます。PNG ファイルはすべて同じ 8 バイトのシグネチャで始まるため、PNG の data URI もすべて data:image/png;base64,iVBORw0KGgo... という同じ形で始まります。
Base64 はピクセルに一切手を加えません。文字列をデコードすれば、色も透明部分も同じ、バイト単位で完全に一致するファイルが得られます。
PNG の data URI が適した用途
- 背景の透過が必要な、小さな UI アイコンやロゴ。
- 単体で完結する HTML レポート、バグ報告、エクスポートしたドキュメントに含めるスクリーンショット。
- サーバーで生成し、JSON レスポンスで返すグラフや QR コード。
canvas.toDataURL()で作成した画像。このメソッドはデフォルトで PNG の data URI を出力します。
写真の場合は話が別です。PNG は写真もロスレスで保存するため、ファイルが大きくなります。JPEG や WebP を使えば、文字列ははるかに短くなります。
エンコード前に PNG を小さくする
PNG から 1 バイト減らすごとに、Base64 では約 1.33 文字を節約できます。まず oxipng や zopflipng（ロスレス）、pngquant（パレットを減色）などの最適化ツールにファイルを通しましょう。ピクセルサイズも確認してください。表示サイズの 3 倍で書き出したアイコンなら、たいていは「最大幅」オプションで縮小できます。
WebP に変換すると透過が保たれ、多くの場合サイズも大幅に小さくなります。JPEG に変換すると透過は失われ、透明な部分は単色になります。ブラウザで PNG に再エンコードしても圧縮は最適化されないため、よく最適化された元のファイルより大きくなることがあります。コピーする前にサイズを比べてください。
出力の使い方
<img src="data:image/png;base64,iVBORw0KGgo..." width="24" height="24" alt="Settings">
.icon-settings {
background: url("data:image/png;base64,iVBORw0KGgo...") no-repeat center / 24px 24px;
}
# コマンドライン：GNU coreutils / macOS
base64 -w 0 icon.png
base64 -i icon.pngよくある質問
Base64 にしても PNG の透過は保たれますか？
はい。Base64 はファイルのバイト列をそのままエンコードするため、アルファチャンネルも保持されます。透過が失われるのは、画像を JPEG に変換した場合だけです。
PNG の Base64 文字列がいつも iVBORw0KGgo で始まるのはなぜですか？
この文字列は、PNG のファイルシグネチャを Base64 で表したものです。PNG のはずの文字列が別の文字で始まっている場合は、別の形式か、データが破損しています。
スクリーンショットを直接貼り付けられますか？
data:image/png の結果が得られます。どのくらいの大きさの PNG まで Base64 で埋め込むべきですか？
一般的な目安は数 KB、多くても 10 KB 程度です。それより大きな画像は、ブラウザがキャッシュして並行して読み込める別ファイルとして配信するほうが適しています。