開発者 / エンコード
Data URIジェネレーター
ファイルをData URIに変換し、そのまま貼り付けられるCSSとHTMLのスニペット、SVG向けのより小さいURLエンコード形式、エンコード後のファイルサイズの増加量を表示します。
Data URIジェネレーター: Data URI（RFC 2397）は、ファイルの内容をリンクやスタイルシートに直接埋め込み、別途リクエストする必要をなくします。Base64エンコードでは3 bytesごとに4 charactersへ変換されるため、ファイルサイズは約3分の1増加します。テキストであるSVGは、%、#、<、>などの文字だけをエスケープするパーセントエンコードも使用でき、通常はこちらのほうが小さくなります。 サーバーへのファイルアップロードは一切なく、100%ブラウザ内でローカル実行します。
- カテゴリ
- 開発者ツール
- 実行回数
- ブラウザ内で
- コスト
- 無料 · 登録不要
- 提供状況
- すぐに使えます
完全にブラウザ内で実行します
ファイルはブラウザ内で読み込まれ、アップロードされることはありません。
Data URIが機能する場所
Data URIはimg src、CSSのurl()、アイコン用のlink href、ダウンロードリンクで使用できます。ブラウザはdata URIをトップレベルページとして開くことをブロックします。また、厳格なContent Security Policyでは、Data URIを使用する画像やスタイルに対してdata:を許可する必要があります。
ファイルではなくテキストをエンコードするにはBase64エンコーダーを、Base64文字列が用意された画像には画像からBase64ツールを使用してください。
サイズの増加
Base64にするとファイルサイズは3分の1増加しますが、エンコードされたテキストは圧縮しやすいため、サーバー側でテキストを圧縮（gzipまたはBrotli）すれば、その増加分の多くを取り戻せます。実際の負担は、データを個別にキャッシュできず、それを含むページやスタイルシートを読み込むたびに再ダウンロードされることです。
使い方
- ファイルを選択またはドロップします。画像はプレビューされます。
- SVGファイルの場合は、URLエンコードまたはBase64エンコードを選択します。
- Data URI、CSSスニペット、またはHTMLスニペットをコピーします。
プライバシーと制限事項
ファイルはブラウザ内で読み込まれ、アップロードされることはありません。
関連ツール
よくある質問
Data URIはどのような場合に使いますか？
数キロバイト未満のアイコンなど、1回だけ使う小さなファイルに適しています。大きなファイルは、ブラウザがキャッシュして並列読み込みできるよう、別ファイルとして配信するほうが適しています。
SVGにURLエンコードを使う理由は何ですか？
SVGの可読性を保ち、通常はBase64より小さくできます。ダブルクォートはシングルクォートに変換されるため、url("…")やHTML属性の中に収められます。
サイズに上限はありますか？
最新のブラウザは画像やスタイルシート内で数MBのData URIを受け入れますが、大きなData URIは解析を遅くし、ページを重くします。
無料ツール · ブラウザ内で · アカウント不要