PNGをBase64に変換 - 無料・即時・ブラウザー内で完結

ツール / 開発者ツール / PNGをBase64に変換

PNG → Base64 変換ツール

最大 10 MB。アップロードは行われず、ファイルが端末から出ることはありません。

ファイルのプライバシーを保護

この変換はすべてブラウザー内で行われます。画像がアップロードされることはなく、ここでエンコードした内容が当社のサーバーや第三者に渡ることもありません。

PNGからBase64への変換について

PNG は、もっとも頻繁に埋め込まれる形式です。アイコン、ロゴ、小さなスプライト——埋め込まなければそれぞれが個別のネットワークリクエストを発生させる、細かなインターフェース部品です。これを Base64 にエンコードすると、スタイルシートや HTML 属性へ直接貼り付けられるテキストになります。それが得策かどうかは、ほぼ完全にファイルの小ささ次第です。

PNGをBase64に変換する手順

  1. 1 .pngファイルをアップロード欄にドロップします。
  2. 2 結果はすぐに表示されます。押すボタンも、待ち時間もありません。
  3. 3 必要な形式をコピーします。HTML と CSS 向けのデータURI、JSON 向けの生の文字列、あるいはそのまま使える CSS ルールです。

埋め込みが本当に得になるとき

ページ上の画像はひとつごとにリクエストを消費し、リクエストには運ぶバイト数を超えたオーバーヘッドがあります。1 KB のアイコンでは、そのオーバーヘッドがファイル本体を上回ることさえあります。だからスタイルシートに畳み込むのは本当の利得になります。おおまかな目安として、数キロバイト未満なら埋め込みは有利に働き、10 キロバイトを超えると害になり始めます。損益分岐点は固定の数値ではなく、回線、サーバー、帯域を奪い合う他の要素の数によって動きます。しかし取引の形はいつも同じです。往復を 1 回減らす代わりに、余分なバイトを払うのです。

引き換えに失うもの

三つあり、二つ目は意外に思われがちです。第一にサイズ。エンコード後のテキストはファイルより約 3 分の 1 大きくなります。第二にキャッシュ。埋め込んだ画像は単独でキャッシュできないため、それを含むスタイルシートが変わるたびに再ダウンロードされます。そしてスタイルシートはロゴよりはるかに頻繁に変わります。第三に、ブラウザーは描画の前に文字列をデコードしなければなりません。アイコンなら些細ですが、大きなものでは計測できるほどになります。透明度だけは無傷で残ります。アルファチャンネルは PNG データの一部であり、Base64 はそれをバイト単位でそのまま写し取るからです。

アイコンならまず SVG を検討

エンコードしようとしているのがフラットなアイコンや単純なロゴなら、SVG はたいていエンコード前の時点で PNG より小さく、エンコード後はなおさら差がつきます。SVG はもともとテキストであり、Base64 をまったく必要としないからです。しかも 2 つ目のファイルなしで、あらゆる画面密度に対応できます。写真的な階調、なめらかなグラデーション、ベクターが苦手とする効果を含む絵柄のときに PNG を選んでください。その場合は、エンコードの後ではなく前に小さくしておきましょう。Base64 は渡されたものを、そのまま忠実に大きくします。

PNG→Base64 のよくある質問

はい、完全に保たれます。Base64 は画像にいっさい手を加えず、まったく同じバイト列を別の文字集合で表現し直すだけです。アルファチャンネルはそのバイト列の一部なので、透過 PNG は透過のまま残り、デコード結果は元のファイルとビット単位で一致します。
新着
PDFをBase64に変換 文書をテキストで受け取るAPI向けにPDFをBase64へ変換。生の文字列、データURI、埋め込み用コードをブラウザー内で取得できます。
本日の人気
PDFをBase64に変換 文書をテキストで受け取るAPI向けにPDFをBase64へ変換。生の文字列、データURI、埋め込み用コードをブラウザー内で取得できます。

関連する開発ツール

Base64エンコーダーとデコーダー 無料のBase64エンコーダー/デコーダー。テキストやファイルをブラウザー内で相互変換でき、サーバーには送信されません。
JPGをBase64に変換 JPG写真をBase64に変換し、データURI・生の文字列・CSSスニペットをコピー。インライン化が不向きな場合も案内します。
WebPをBase64に変換 WebP画像をBase64に変換し、データURI・生の文字列・CSSスニペットをコピー。失われるフォールバックについても説明します。
PDFをBase64に変換 文書をテキストで受け取るAPI向けにPDFをBase64へ変換。生の文字列、データURI、埋め込み用コードをブラウザー内で取得できます。

その他のおすすめツール

WordをPDFに変換 Wordを無料でPDFに変換。DOC・DOCX・ODT・RTFをアップロードすると、体裁を保ったPDFを数秒でダウンロードできます。
PDFをWordに変換 PDFを無料でWordに変換。PDFをアップロードすると、数秒で編集可能なDOCXをダウンロードできます。登録も透かしも不要。
ワードカウンター 無料の文字数カウント。テキストを貼るだけで単語・文字・文・段落を数え、読了時間の目安も表示。データは送信されません。
文字カウンター 無料の文字数カウント。スペースあり・なしの文字数、単語数、行数を数え、タイトルやメタディスクリプションの目安も確認できます。
キーワード密度チェッカー 無料のキーワード出現率チェッカー。テキストやURLを入力すると、各語句の出現回数と割合がわかります。