Data URI ジェネレーター
任意のファイルやテキストを、適切な MIME タイプの data: URI（Base64 またはパーセントエンコード）に変換し、そのまま使える <img> と CSS 背景のスニペットも生成。ローカルで動作します。
Data URI ジェネレーターとは？
Data URI は、data:<mime>;base64,<data> の形式でファイルを HTML、CSS、JSON の中に直接埋め込むため、別のリクエストが不要になります。このツールは、任意のファイル（画像、フォント、SVG、PDF など）や入力したテキストを Data URI に変換し、MIME タイプを検出し、Base64 とパーセントエンコードを選べるようにして、対応する HTML と CSS のスニペットを提供します。
Data URI ジェネレーターの使い方
- ファイル を選んでファイルをドロップするか、テキスト を選んで内容を入力します。
- MIME タイプ を確認または編集します。
- バイナリファイルでは Base64 エンコード をオンのままにします。テキストと SVG をパーセントエンコードするにはオフにします（多くの場合、より小さくなります）。
- Data URI または HTML / CSS のスニペットをコピーします。
例
Text: Hello, World! (Base64 on)
data:text/plain;base64,SGVsbG8sIFdvcmxkIQ==
Data URI ジェネレーターを使うべき場面
アイコン、小さな SVG、プレースホルダー画像、単一ファイルのデモやメールテンプレートに入れるフォント、テストフィクスチャなど、小さなアセットに Data URI を使います。Web サイトで数キロバイトを超えるファイルには避けてください。Base64 はサイズを約 33% 増やし、埋め込まれたデータはページやスタイルシートとは別にキャッシュできません。
Data URI ジェネレーターの仕組み
ファイルはブラウザ内でバイト列として読み込まれます。MIME タイプはブラウザまたはファイルの拡張子から決まります。Base64 の場合、バイト列は標準のアルファベット（RFC 4648）でエンコードされ、data:<mime>;base64,…（RFC 2397）として書き出されます。Base64 を使わない場合、内容は UTF-8 としてデコードされて encodeURIComponent でエスケープされ、テキスト系のタイプには ;charset=utf-8 が追加されます。画像にはプレビューが表示され、結果のサイズも表示されます。
一般的な使用例
- 小さな SVG アイコンを CSS の background-image にインライン化する
- 単一ファイルの HTML レポートに画像を埋め込む
- JSON API のフィクスチャに小さな画像を入れる
- 自己完結したメール署名用の画像を作成する
よくある質問
Data URI が元のファイルより大きいのはなぜですか？
Base64 は 3 バイトごとを 4 文字にエンコードするため、結果は約 33% 大きくなります。テキストや SVG をパーセントエンコードすると、多くの場合より小さくなります。
ファイルはアップロードされますか？
いいえ。ファイルの読み込みとエンコードはすべてブラウザ内で行われます。
サイズの上限はありますか？
ツールは最大 20 MB のファイルを受け付けますが、ブラウザやメールクライアントは大きな Data URI をうまく扱えないため、小さく保ってください。