PNG → Base64 変換ツール
最大 10 MB。アップロードは行われず、ファイルが端末から出ることはありません。
<img src> 属性や CSS の url() でそのまま使えます。
data: プレフィックスなし。JSON のペイロードや API 向けです。
ファイルのプライバシーを保護
この変換はすべてブラウザー内で行われます。画像がアップロードされることはなく、ここでエンコードした内容が当社のサーバーや第三者に渡ることもありません。
PNGからBase64への変換について
PNG は、もっとも頻繁に埋め込まれる形式です。アイコン、ロゴ、小さなスプライト——埋め込まなければそれぞれが個別のネットワークリクエストを発生させる、細かなインターフェース部品です。これを Base64 にエンコードすると、スタイルシートや HTML 属性へ直接貼り付けられるテキストになります。それが得策かどうかは、ほぼ完全にファイルの小ささ次第です。
PNGをBase64に変換する手順
- 1 .pngファイルをアップロード欄にドロップします。
- 2 結果はすぐに表示されます。押すボタンも、待ち時間もありません。
- 3 必要な形式をコピーします。HTML と CSS 向けのデータURI、JSON 向けの生の文字列、あるいはそのまま使える CSS ルールです。
埋め込みが本当に得になるとき
ページ上の画像はひとつごとにリクエストを消費し、リクエストには運ぶバイト数を超えたオーバーヘッドがあります。1 KB のアイコンでは、そのオーバーヘッドがファイル本体を上回ることさえあります。だからスタイルシートに畳み込むのは本当の利得になります。おおまかな目安として、数キロバイト未満なら埋め込みは有利に働き、10 キロバイトを超えると害になり始めます。損益分岐点は固定の数値ではなく、回線、サーバー、帯域を奪い合う他の要素の数によって動きます。しかし取引の形はいつも同じです。往復を 1 回減らす代わりに、余分なバイトを払うのです。
引き換えに失うもの
三つあり、二つ目は意外に思われがちです。第一にサイズ。エンコード後のテキストはファイルより約 3 分の 1 大きくなります。第二にキャッシュ。埋め込んだ画像は単独でキャッシュできないため、それを含むスタイルシートが変わるたびに再ダウンロードされます。そしてスタイルシートはロゴよりはるかに頻繁に変わります。第三に、ブラウザーは描画の前に文字列をデコードしなければなりません。アイコンなら些細ですが、大きなものでは計測できるほどになります。透明度だけは無傷で残ります。アルファチャンネルは PNG データの一部であり、Base64 はそれをバイト単位でそのまま写し取るからです。
アイコンならまず SVG を検討
エンコードしようとしているのがフラットなアイコンや単純なロゴなら、SVG はたいていエンコード前の時点で PNG より小さく、エンコード後はなおさら差がつきます。SVG はもともとテキストであり、Base64 をまったく必要としないからです。しかも 2 つ目のファイルなしで、あらゆる画面密度に対応できます。写真的な階調、なめらかなグラデーション、ベクターが苦手とする効果を含む絵柄のときに PNG を選んでください。その場合は、エンコードの後ではなく前に小さくしておきましょう。Base64 は渡されたものを、そのまま忠実に大きくします。