CSS データURI変換ツール
画像や小さなファイルをCSSのデータURIに変換します。background-imageルール、url()の値、HTMLの<img>タグ、生のデータURIをすぐにコピーして使えます。ブラウザ内で動作します。
入力
Drop a file or browse
One file · any type
ファイルはローカルで読み込まれます — サーバーにアップロードされることはありません。
出力
CSSルール
CSS url() の値
HTML <img> タグ
生のデータURI
役に立ちましたか？
このツールを使う他の方法
埋め込みウィジェット
<iframe
src="https://iotools.cloud/embed/css-data-uri-converter/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="CSS データURI変換ツール — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。
次の方法でも利用可能
ガイド
小さな画像を、スタイルシートにそのまま貼り付けられるCSSに変換します。ファイルをアップロードすると、4種類の完成した出力が得られます。完全なbackground-imageルール、単独のurl("data:…")値、HTMLの<img>タグ、そして生のデータURIです。
使い方
- 画像（PNG、JPEG、GIF、WebP、SVG、その他の小さなアセット）を置きます。
- ルールを適用するCSSセレクターと、必要に応じて
<img>タグのaltテキストを設定します。 - 必要なスニペットをコピーします。
画像をインライン化するタイミング
インライン化すると HTTP リクエストを1回減らせるため、小さなアイコン、パターン、プレースホルダーに有効です。Base64 はサイズが約33%増え、アセットを単独でキャッシュできなくなるため、数キロバイト程度のファイルに限って使い、それより大きなものには通常のリンクファイルを使ってください。
プライバシー
ファイルはブラウザで読み込まれ、ローカルで変換されます。アップロードされることはありません。
関連ツール
生の文字列だけが必要な場合は、Data URI ジェネレータまたはファイルをBase64に変換を使ってください。Base64をファイルに戻すには、Base64をファイルに変換を使います。
cssdata uribackground-imagebase64image to cssinline imagehtml img