Base64
Image Data URL
⚠️ Large image may freez the browser
CSSで使用するBase64にPNGをエンコードする
PNG画像をBase64またはDataURL形式に変換します。外部ファイルなしでCSSまたはJavaScriptに直接埋め込みます。ファイルサイズが大きいとパフォーマンスに影響を与える可能性があるため、小さいサイズが推奨されます。Base64エンコードは、ウェブアセットとの統合を効率化し、外部リソースへの依存を減らします。DataURL形式は、動的コンテンツ配信のためのコード構造を簡素化します。
Image → Base64 / Data URL
Click or Drag & Drop an Image
画像をBase64コードに変換する
1
PNG画像アップロード
PNG画像をアップロードするには、アップロード領域をクリックするか、画像をドラッグ＆ドロップしてください。
2
符号化方式を選択してください
「Base64」または「DataURL」タブのいずれかを選択して、希望するエンコード形式を選んでください。
3
Base64データを見る
タブの下にあるテキストエリアには、画像のBase64またはDataURL形式の表現が表示されます。
4
コピー エンコードされたテキスト
CSSまたはJavaScriptで使用するために、エンコードされたテキストをクリップボードにコピーするには、'コピー'ボタンをクリックしてください。
CSS内にPNG画像を直接埋め込む
CSSに直接小さな画像を埋め込むには、PNGをBase64またはDataURL形式に変換することで実現できます。encode-png-to-base64-for-cssツールは、ウェブ開発のワークフローを効率化し、HTTPリクエストを削減します。その結果、コードがより整理され効率的になり、ページロード時間も短縮されます。
ファイルサイズとHTTPリクエストを削減する
このツールは、PNG画像をBase64またはDataURL形式に変換することで、ウェブサイトが必要とするファイルの数を減らします。画像をCSSまたはJavaScriptに直接埋め込むことでHTTPリクエストを減らし、ページ読み込み速度を向上させることができます。この方法により、外部ファイルへの依存関係を最小限に抑え、ウェブサイトのパフォーマンスを最適化します。
よくある質問
Base64 DataURLとは何か、そしてなぜそれを使用するのでしょうか？
Base64 DataURLは、画像を文字の文字列として表現する方法です。CSSやJavaScriptコードに画像を直接埋め込むことができ、外部ファイルから読み込む必要がなくなります。これは、小さなアイコンや画像に便利です。
生成されたBase64またはDataURLはどのように使用しますか？
変換した画像のコードをコピーして、CSSまたはJavaScriptに貼り付けてください。例えば、CSSでは、以下のように使用できます。background-image: url('data:image/png;base64,...');
このツールは何の画像形式をサポートしていますか？
このツールはPNG画像専用に設計されています。他の形式では正しく変換されない可能性があります。
大きな画像は推奨されないのはなぜですか？
大きな画像は非常に長いBase64文字列を作成し、コンピュータの動作を遅くしたり、ページの読み込み時間を長くしたりする可能性があります。 小さな画像にこのツールを使用するのが最適です。
アップロードできる画像のサイズに制限はありますか？
ファイルサイズの厳格な制限はありませんが、画像が大きいほどパフォーマンスが低下します。最適な結果を得るには、小さいPNGファイルを使用することをお勧めします。