CSSデータURIコンバーター
画像をCSSに直接埋め込めるBase64データURIに変換。HTMLやCSSファイルで即座に使用できます。100%クライアントサイド。
全画像形式対応
PNG、JPG、GIF、WebP、SVG画像をサポート。MIMEタイプはファイルから自動的に検出されます。
CSSクラスジェネレーター
background-image、background-size、background-repeat プロパティを含む完全なCSSクラスを生成します。
ワンクリックコピー
生成されたCSSコードまたは生データURIをワンクリックでコピー — スタイルシートにそのまま貼り付けられます。
ライブプレビュー
生成されたCSSとともに画像のプレビューを表示し、すべてが正しく見えるか確認できます。
100%クライアントサイド — データがデバイスから離れることはありません
ここに画像をドロップするか、クリックして参照
PNG、JPG、GIF、SVG、WebP対応
画像をアップロードして、Base64データURIを埋め込んだCSSを生成します
1
画像をアップロード
画像ファイル（PNG、JPG、GIF、SVG、WebP）をドラッグ＆ドロップまたは参照して選択します。
2
CSSを自動生成
ツールが画像をBase64に変換し、background-imageを含む完全なCSSクラスを生成します。
3
コピーして使用
生成されたCSSコードをコピーして、スタイルシートに直接貼り付けます。
よくある質問
以下を検索するか、よくある質問をご覧ください。
background-imageプロパティを使用してBase64エンコード画像をCSSファイルに直接埋め込む方法で、HTTPリクエストを1回節約できます。
小さなアイコンの場合、リクエスト数を減らすことで読み込み時間が改善されます。しかし大きな画像の場合、CSSファイルが大幅に肥大化し、レンダリングブロックの遅延を引き起こす可能性があります。