ConvertBlink
JA

PNGをBase64に変換：PNGをData URIにエンコード

ブラウザ内でPNGをBase64のData URIにエンコード。HTML・CSS・JSに貼り付けて小さなアイコンをインライン化できます。アップロード不要、ワンクリックでコピー、可逆。

ブラウザーネイティブ
プライバシー第一
無料

今すぐ変換

ファイルをここにドラッグ＆ドロップ

または

使い方

小さなPNGをBase64のData URIとしてインライン化すると、HTTPリクエストを1つ減らせます。画像のバイト列がHTML・CSS・JSの中に収まるため、ブラウザがわざわざ取得しに行く別ファイルが不要になるからです。このツールはPNGをローカルで読み込み、`data:image/png;base64,...`の文字列にエンコードし、その横にワンクリックのコピーボタンを並べます。ファイルが端末の外に出ることはありません。 エンコード自体は可逆です。すべてのピクセルとアルファチャネルがそのまま残るので、透過アイコンは透過のままです。Base64はバイナリ3バイトをASCII文字4文字で表すため、文字列はもとのファイルよりおよそ3分の1ほど大きくなります。このオーバーヘッドは2KBのアイコンには妥当な代償ですが、200KBの画像には割に合いません。そのうえブラウザキャッシュも効かなくなり、配信するスタイルシートが肥大化します。 知っておきたい点が1つあります。出力はバイト単位のコピーではなく、新たに再エンコードされたPNGです。PNGをデコードしてキャンバスに描き直し、再エンコードするため、埋め込みICCプロファイルやテキストメタデータといった付随チャンクは破棄され、16ビット画像は1チャネルあたり8ビットに丸められます。見えるピクセルは同じでも、できあがる文字列の長さは元と異なることがあります。コピーしたURIを`<img src>`やCSSの`background-image: url(...)`、JSの文字列に貼り付ければ、別リクエストなしで表示されます。

関連変換ツール

あなたのワークフローに役立つ他の強力なコンバーターを発見してください

PNG最適化ツール：ピクセルそのまま、可逆圧縮

oxipngでPNGファイルを可逆圧縮。フィルターとDEFLATEの最適化でピクセルはそのまま容量だけ削減。ブラウザ内で動作し、アップロードも画質劣化もありません。

.png
今すぐ試す

PNGをAVIFに変換 - 可逆圧縮で透過もそのまま

ブラウザ上でPNGを可逆圧縮のAVIFに変換。AV1のイントラ符号化が、全ピクセルと透過をそのまま残したままファイルを小さくします。アップロード不要、すべて端末内で完結。

.png
今すぐ試す

PNGをJPEGに変換 - 重い写真PNGを軽くする

ブラウザでPNGをJPEGに変換し、写真のファイルサイズを削減。品質85の不可逆圧縮で再エンコードし、透明部分は背景色で塗りつぶされます。アップロードなし、ファイルは端末から出ません。

.png
今すぐ試す

画像をBase64データURIに変換（JPG/PNG/GIF/WebP対応）

JPG・PNG・GIF・WebPを、HTML・CSS・JSにそのまま貼り付けられるBase64のdata:URIに変換します。処理はブラウザ内で完結し、ファイルは端末から外に出ません。

.jpg.jpeg +3
今すぐ試す

JPEGをBase64 data URIに変換、ブラウザ完結で無料

JPEGをBase64のdata URIにエンコードし、HTML・CSS・JSにそのまま貼り付け。ブラウザ内で完結しアップロードなし。ワンクリックで文字列をコピー。

.jpg.jpeg
今すぐ試す

TGAをPNGに変換：Targaファイルをどこでも開く

Truevision TGA（Targa）をブラウザでそのままPNGに変換。可逆・アルファチャンネル保持、RLEと非圧縮に対応、アップロードなし。

.tga
今すぐ試す

他のPNG

png optimizerpng → avifpng → jpegpng → jxlpng → pdf

変換先BASE64

canvas → base64jpg → base64
すべてのコンバーターを表示

機能

  • ファイルアップロード不要
  • 100% プライバシー重視
  • ブラウザー駆動
  • 高速処理
  • 永久無料

対応フォーマット

.png

出力: Base64

技術仕様

input Format PNG（Portable Network Graphics、アルファあり・なしの両方；16ビット入力は8ビットにダウンサンプリング）
output Format Base64のData URI文字列（data:image/png;base64,...）
compression Type 再エンコードしたPNGの可逆テキストエンコード；エンコード工程での画質低下なし
quality Retention ピクセルとアルファチャネルを保持；メタデータチャンクは除去、16ビットは8ビットに丸め
color Space Support RGBおよびRGBA（1チャネルあたり8ビット）；埋め込みICCカラープロファイルは引き継がれない
max Resolution 端末のメモリによってのみ制限
processing Time 即時、ブラウザ内で実行

主な利点

  • 小さな画像で別途のHTTPリクエストを1つ削減
  • 可逆エンコード：ピクセルと完全な透過を保持
  • ワンクリックのコピーで貼り付けるだけのdata:image/png;base64 URIが得られる
  • 100%ブラウザ内で実行、ファイルは一切アップロードされない
  • HTML・CSSのurl()・JavaScript文字列でそのまま使える
  • 登録不要、ウォーターマークなし、メモリ以外にファイルごとの制限なし

一般的な使用例

  • UIアイコンや小さなロゴをCSSスタイルシートにインライン化
  • プレースホルダーやスプライトをHTMLマークアップに直接埋め込み
  • アセットを単一ファイルのHTMLページやWebコンポーネントにまとめる
  • 小さなグラフィックをJavaScriptやフレームワークのコンポーネントに直書き
  • ごく小さな画像をJSONやデータベースのテキストフィールドに保存
  • レンダリングを妨げるファーストビューのアイコンで追加リクエストを削減

プロのヒント

  • 小さなアセットに限定すること；約33%のオーバーヘッドとキャッシュ喪失は大きな画像に響く
  • data:image/png;base64, の接頭辞を含めた文字列全体をコピーすること、でないと表示されない
  • 繰り返すCSS背景では、インライン化したアイコンが読み込み前のちらつきを防ぐ
  • サイト全体で使い回す画像はインライン化しないこと；共有ブラウザキャッシュを失う
  • 透過だけが必要な単色の図形なら、インラインSVGのほうがPNGのData URIよりたいてい大幅に小さい
  • メールではData URIを入念にテストすること；OutlookやGmailのWeb版はしばしばブロックする

よくある質問

data:image/png;base64, という接頭辞を含めた文字列全体を url() に貼り付けます：background-image: url(data:image/png;base64,iVBORw0KGgo...)。同じ文字列はHTMLの <img src="..."> 属性やJSの文字列でもそのまま使えます。CSSでは特別な引用符は不要ですが、値を引用符で囲んでも問題はなく、一部のリンターはそちらを好みます。
Base64の工程は可逆です。バイナリをテキストにエンコードするだけなので、ピクセルとアルファチャネルはそのまま正確に保たれます。唯一の注意点は、このツールがキャンバスを通してPNGを再エンコードするため、ICCプロファイルなどのメタデータが取り除かれ、16ビット画像が8ビットに丸められることです。一般的な8ビットのWebグラフィックなら見た目に違いは出ません。
Base64は3バイトごとに4つのASCII文字へ対応づけるため、構造上およそ33%増えるうえ、わずかなパディングも加わります。小さなアイコンならHTTPリクエストを1つ節約できる良い取引です。大きな画像では、このオーバーヘッドとブラウザキャッシュが効かないことが重なり、ふつうにリンクしたファイルのほうが速く読み込めるのが通常です。
小さく静的なアセットをインライン化しましょう：UIアイコン、スプライト、ごく小さなロゴ、あるいは本来なら追加のレンダリングを妨げるリクエストになる読み込みプレースホルダーなどです。大きなものや、多数のページで使い回すものはインライン化しないでください。リンクしたファイルは一度キャッシュされてどこでも共有されますが、インライン化したものはそれを含むページごとに再ダウンロードされます。
いいえ。エンコードはすべてブラウザ内のJavaScriptで動きます。PNGが端末の外に出ることはないので、社内向けアセットやスクリーンショット、第三者のサービスに送りたくないものでも安全です。
対応状況はまちまちです。Apple Mailや多くのモバイルクライアントはData URIを表示しますが、いくつかのバージョンのOutlookやGmailのWeb版は取り除いたりブロックしたりします。HTMLメールでは、インライン化せず画像をホストして絶対URLでリンクしてください。
エンコードで情報が失われないため、どんなBase64デコーダーでもきれいに元へ戻せます。このサイトでは base64-to-image と base64-to-jpg のツールが、Data URIまたは生の文字列を受け取ってダウンロード可能なファイルを返します。
端末のメモリによって制限され、アップローダーには100MBの上限があります。実際には数十KBを超えるものはインライン化に向きません。これは小さなグラフィック用にとどめ、それ以外は通常のファイルとしてリンクしましょう。