Base64
Image Data URL
⚠️ Large image may freez the browser
CSS 背景を Base64 で生成する
画像をBase64またはDataURL形式に変換し、CSSの背景画像やその他のWebアプリケーションで使用します。画像をアップロードし、希望のタブを選択して、生成されたコードをコピーしてください。ウェブサイトのコードに画像を直接埋め込むのに適していますが、大きな画像はパフォーマンスに影響する可能性があります。
Image → Base64 / Data URL
Click or Drag & Drop an Image
画像をBase64コードに変換する
1
画像をアップロード
画像をアップロードするには、アップロード領域をクリックするか、画像をドラッグして配置してください。
2
Base64またはDataURLを選択してください。
「ベース64」または「DataURL」タブを選択して、希望の形式を選んでください。
3
Base64コードを表示
タブの下にあるテキストエリアに、Base64またはDataURLコードが表示されます。
4
コピーされたコードを生成する
生成されたコードをクリップボードにコピーするには、'コピー'ボタンをクリックしてください。
CSSに画像を直接埋め込む
CSSにBase64またはDataURLエンコードを使用して画像を直接埋め込むことで、HTTPリクエストを減らし、ウェブサイトのパフォーマンスを最適化します。この方法は、個別の画像ファイルをなくすことでロード時間を改善しつつ、小さなアイコンや装飾的なグラフィックなどの視覚要素を維持します。サイトの速度を損なうことなく、軽量アセットを効率的に統合できます。
エンコードされた画像を使用した高速CSS背景
CSSの背景を設定するために、画像をBase64またはDataURL形式でエンコードします。この方法により、視覚要素をコードに直接統合することでワークフローが効率化されます。外部の画像ファイルの使用を減らすことで、HTTPリクエストを削減し、ウェブサイトのパフォーマンスを向上させることができます。特に小さな視覚要素を取り入れながらパフォーマンスを向上させる場合に最適です。
よくある質問
Base64 と DataURL とは何ですか？
Base64とDataURLは、画像をテキスト文字列として表現する方法です。これにより、画像ファイルを別途用意することなく、ウェブサイトのコードに画像を直接埋め込むことができます。
生成されたBase64またはDataURLはどのように使用できますか？
生成されたコードは、CSSの背景画像として、HTMLの属性として、またはデータURIが受け入れられるあらゆる状況で使用できます。例えば、CSSでは次のように使用できます。background-image: url('data:image/png;base64,...');
このツールはなぜ他の方法よりも使うべきですか？
このツールは、ワンクリックとコピーボタンで画像をBase64またはDataURLに変換する、簡単で便利な方法を提供します。高速で使いやすいです。
このツールを使用する際に何か制限はありますか？
変換プロセス中にコンピュータのパフォーマンスが低下する可能性があるため、大きな画像の利用は推奨されません。
どの画像形式がサポートされていますか？
このツールは、PNG、JPG、GIFなどの一般的な画像フォーマットをサポートしています。